[SeSAC] React 학습 정리(4) - LifeCycle

 

LifeCycle

React LifeCycle(생명 주기) 란

1. 생명 주기(LifeCycle)는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 되는 과정 이다.

2. 컴포넌트의 생명주기를 관리하고 컨트롤하는 방법을 나타내는 개념

>>컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

1. 클래스형 컴포넌트 LifeCycle

모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정

 

즉, 컴포넌트 생성시 -> 생명주기 메서드

컴포넌트 업데이트시 -> 생명주기 메서드

컴포넌트 제거시 -> 생명주기 메서드

 

다시말해 생명주기 메서드를 활용해서 LifeCycle에 따라 특정 코드를 실행 시킬 수 있다.

 

1-1. 생명주기 메서드

컴포넌트를 ..

 

✔ 생성할 때(마운트) 메서드

 - constructor() : 클래스 생성시 실행되는 생성자 메서드, 주로 props를 세팅하고나 state에 초기값을 할당하는데 사용
 - static getDerivedStateFromProps()
 - render() : 컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그림
 - componentDidMount() : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출

 

✔ 업데이트할 때 메서드 (props 또는 state 변경)

 - static getDerivedStateFromProps()
 - shouldComponentUpdate() : props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출 [성능 최적화를 위한 메서드]
 - render() : 컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그림
 - getSnapshotBeforeUpdate()
 - componentDidUpdate() : 갱신이 일어난 직후에 호출. 이 메서드는 최초 렌더링에서는 호출되지 않음

 

✔ 제거할 때(언마운트) 메서드

 - componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출

 

✔ 오류가 발생 할 때 메서드

- static getDerivedStateFromError() : 하위의 자손 컴포넌트에서 오류가 발생했을 때 호출
- componentDidCatch() : 자손 컴포넌트에서 오류가 발생했을 때에 호출

  - componentDidCatch(error, info) >> 2개의 매개변수를 전달 받는다.

    - error : 발생한 오류

    - info : 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 포함한 componentStack 키를 갖고 있는 객체

 

 

 

2. 함수형 컴포넌트 LifeCycle

https://wavez.github.io/react-hooks-lifecycle/

 

 

클래스형 컴포넌트 라이프사이클 메서드 중 주로 사용되는 아래 메서드와 대응되는 함수형 컴포넌트내의 함수들

클래스형 컴포넌트	함수형 컴포넌트
constructor()	함수형 컴포넌트 내부의 코드로 수행	생성시 실행, 주로 props를 세팅하고나 state에 초기값을 할당하는데 사용
render()	return()	컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그림
componentDidMount()	useEffect()	컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출
componentDidUpdate()	useEffect()	컴포넌트가 갱신이 일어난 직후에 호출.
componentWillUnmount()	useEffect()	컴포넌트가 마운트 해제되어 제거되기 직전에 호출

즉, 함수형 컴포넌트에서는 마운트/업데이트/언마운트 생명주기에 따라 코드를 수행하는것을 useEffect() Hook 하나로 수행한다.

 

 

2-1. useEffect

// nodejs 에서
import React, { useState, useEffect } from 'react';

// useEffect(콜백함수[, 의존성 배열])
// 1. 콜백함수 : 랜더링 이후 실행할 함수 (마운트, 업데이트 시)
//   - 콜백함수가 함수를 return 그 반환되는 함수가 컴포넌트 언마운트 될 때 실행
// 2. 의존성 배열 : 배열 값이 변하면 콜백 함수 실행 
//   - 생략하면 : 마운트&업데이트 시 동작
//   - 빈배열 : 마운트 시 동작
//   - 값이 있는 배열 : 업데이트 시 동작 (배열안의 값이 변할 때)


useEffect(() => {
  console.log('컴포넌트 마운트&업데이트 시')
});

useEffect(() => {
  console.log('컴포넌트 마운트 시')
}, []);

const [data, setData] = useState();
useEffect(() => {
  console.log('data 값이 업데이트 시')
}, [data]);

useEffect(() => {
    return () => {
      console.log("컴포넌트 언마운트 시");
    };
  }, []);

 

 

끝