18. 라이프사이클 - functional component

이번에는 함수형 컴포넌트에서의 라이프 사이클을 알아보도록 하겠습니다.

라이프사이클

함수형 컴포넌트에서 useEffect는 라이프사이클에 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것입니다.

클래스에서 라이프사이클은 컴포넌트 기준이었다면 함수형 컴포넌트는 데이터들을 기준으로 컴포넌트가 만들어지고 수정되고 사라집니다.

아래는 버튼을 클릭했을 때 버튼의 숫자를 업데이트 되게 하는 코드입니다.


import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
// import App from "./App";

function App() {
  const [num, setNum] = useState(0);

  const onClick = () => {
    setNum(num + 1);
  };

  useEffect(() => {  // 1 - useEffect
    console.log("ComponentDidMount");
  }, []); 
 

  useEffect(() => { // 2 - useEffect
    console.log("componentDidUpdate");
    return console.log("componentWillUnmount");
  }, [num]);
  return <button onClick={onClick}>{num}</button>;
}

ReactDOM.render(<App />, document.getElementById("root"));

src / index.js

useEffect는 기본적으로 처음 페이지를 열었을 때 반드시 첫번째 렌더링이 일어납니다. 그래서 위에 설정된 useEffect가 전부 실행되었습니다.

첫번째 인자

useEffect 첫번째 인자에는 DidMount, DidUpdate 될 때마다 실행할 코드를 작성합니다.

두번째 인자

useEffect는 두번째 인자에는 useEffect가 실행을 위해 의존하는 값을 배열 형식으로 넣습니다.

두번째 인자를 넣지 않을 경우, 리렌더링 될 때마다 (모든 state와 props의 값이 변경될 때가 되겠죠?)마다 실행되게 됩니다.

두번째 인자에 의존하는 값이 없는 배열을 넣을 경우 어떠한 값에도 의존하지 않겠다라는 의미가 되어 처음 컴포넌트가 나타날 때 단 한번만 실행됩니다. 이 경우를 componentDidMount와 비슷하다고 생각하면 됩니다.

두번째 인자에 의존하는 값을 배열로 넣게 되면, 처음에 한 번 useEffect가 실행되고, 의존하는 값이 바뀔 때마다 useEffect는 실행됩니다. 이 경우는 componentDidUpdate로 생각하면 됩니다.

세번째 인자

useEffect의 Return에는 componet가 unmount 될 때 실행될 코드를 넣어주면 됩니다. 기본적으로 언마운트가 될 때 실행하는 코드는 setInterval이나 setTimeout을 중지시키는 코드입니다. setTimeout이나 setInterval은 컴포넌트가 unmount되고 새로운 컴포넌트가 생성될 때 자동으로 Javascript에서 중지시켜주지 않습니다. 그래서 컴포넌트가 사라질 때(unmount 될 때) 직접 setInterval과 같은 함수를 중지시켜줘야 합니다.

자, 여기서 라이프 사이클을 이해하려 노력했던 이유에 대해 다시 한 번 얘기해봅시다.