[221130] 리액트 라이프 사이클과 useEffect

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

 

컴포넌트가 real DOM으로 re-rendering이 되기 전에 re-evaluate(재평가)를 거친다.

먼저 새로운 state인 {name: "진도사우르스"}를 가지고 해당 컴포넌트(함수) 재실행(re-run)한다. 그 과정에서 컴포넌트 내부 구조는 모두 재생성(re-creation)하게 된다. 그런 뒤에 react가 변화 전과 변화 후 virtual DOM(가상 DOM)을 각각 생성하여 비교한 후, 차이점을 ReactDOM에게 전달하고 ReactDOM이 차이가 있는 부분만 real DOM으로 update(re-render)하게 된다. 참고로 실제로 이렇게 단계별로 진행되진 않는다고 한다.

 

[React] 기초에서 벗어나기 : State와 re-rendering에 대해

 

class와 hooks에서의 라이프 사이클

class에서 라이프사이클은 돔이 생성되기전에 처리해야 될 일 있다면 componentWillMount()함수를 통해 실행하고 render()함수가 실행되면 mount가 된다. mount가 된 후 화면에 보여지게된 후에 해야 될 일은 componentDidmount() 함수이다. 이후 state가 업데이트가 되면 shoulComponentUpdate()함수는 render를 호출할 필요가 있냐 없나를 확인해 준다. componentWillupdate()컴포넌트가 렌더되기 전에 해야 할 일을 여기서 작성한다고 보면 된다. render가 되면 그 후에 실행시킬 동작을 componentDidUpdate()에서 작성

 

hooks에서 함수형 라이프사이클 useEffect 라는 훅은 웹페이지가 처음으로 렌더가 끝났을때 실행되고 렌더가 또 실행될때마다 실행된다. componentDidMount & componentDidUpdate 와 같은효과이다. 업데이트가 될때마다 useEffect가 실행된다. 참고로 Effect라는 말은 sideEffect가 생략된 것이고 useEffect()는 여러개를 사용할 수 있다.

 

useEffect()

useEffect() 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅이다. useEffect는 컴포넌트가 미운트됐을 때, 언마운트됐을 때, 업데이트됐을 때 특정 작업을 처리할 수 있다. 즉 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

React Hooks : useEffect() 함수

event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

함수형 컴포넌트는 useEffect 훅의 return 부분이 clean up 부분이기 때문에 이곳에서 event listener를 해제해야 한다.

// useEffect-cleanup예제(0)--------------------------------
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes,Route } from "react-router-dom";


function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 브라우저 API를 이용하여 업데이트 합니다.
    // count state가 변경될때 component를 re-render하겠다.
    console.log("component did mount with useEffect!");
    
    // clean-up 함수 
    return () => {
      console.log("component is finished")
    }

  }, []);
  // deps 기능 (의존성배열)
  // 1 빈배열 [] : 컴포넌트가 mount된 시점에 딱 한번만 실행됨
  // 2 전달X     : 컴포넌트가 리렌더될 때마다 실행됨
  // 3 [count]   : 해당 컴포넌트가 업데이트 되면 실행됨 


    return (
    <div>
      <h2>You clicked {count} times.</h2>
      <button onClick={() => {setCount(count + 1)}}>
        Click me
      </button>
    </div>
  );
};

export default Example;
// useEffect-cleanup예제(0)--------------------------------

 

useEffect의 동작원리 / lifecycle / clean-up