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

🏹 생명주기

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;

🔍 실행 결과