생명주기 함수 사용하기 (1)

DONI·2023년 2월 7일
0

React

목록 보기
4/8
post-thumbnail

🏹 생명주기

react에서 생명주기란 컴포넌트의 생성(Mounting),
변경(Updating), 소멸(Unmounting) 과정을 뜻한다.

  • 컴포넌트 생성 과정 함수

    • render()
    • constructor()
    • getDerivedStateFromProps()
    • componentDidMount()
  • 컴포넌트 변경 과정 함수

    • shouldComponentUpdate()

🏹 render( ) 함수

return되는 html 형식의 코드를 화면에 그려주는 함수
화면 내용이 변경되는 시점에 자동으로 호출


🚩 소스코드 ( R004_LifecycleEx.js )

src 폴더에 R004_LifecycleEx.js 파일 생성 후 다음과 같이 입력한다.

import React, { Component } from 'react';

class R004_LifecycleEx extends Component {
  render() {
    console.log('3. render Call');
    return (
      <h2>[ THIS IS RENDER FUCNTION ]</h2>
    )
  }
}

export default R004_LifecycleEx;

🚩 소스코드 ( App.js )

App.js 파일을 다음와 같이 수정한다.

import React from 'react';
import './App.css'; // css 파일 import
import LifecycleEx from './R004_LifecycleEx';
// App.js 파일과 같은 경로에 위치한 R004_LifecycleEx.js 파일을 import해 사용

function App() {
  return (
    <div>
      {/* HTML 코드 입력 */}
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <LifecycleEx></LifecycleEx>
      {/* R004_LifecycleEx.js에서 작성한 component 이식 */}
    </div>
  );
}

export default App;

🔍 실행 결과

profile
틀린 내용이 있다면 댓글 또는 이메일로 알려주세요 ❤ꔛ❜

0개의 댓글