리엑트 useEffect 훅의 역할 및 실행 순서 학습 및 실험

 

요약 

useEfffect 내의 setupcode는 마운트와 업데이트 될 때 일반코드보단 늦게 실행된다.(마운트 이후 실행)

useEffect 의 return문에 있는 cleanupcoded는   업데이트 될 때는 setupcode보다 먼저 , 언마운트 될 때 실행된다.

 

테스트 래포 

https://github.com/suhong99/suhongFTpracticeRF/tree/main/practice/useEffectTest

서론 및 본론

 

 

팀원이   useEffect의 return 문이 언제 작동하는지 질문을 했는데, 제가 정확하게 파악하지 않고 있다는 사실을 알게 되어서 공식 문서를 보고 다시 학습하게 되었습니다.

 

공식문서에서는 아래 사진과 같이 useEffect를 3가지 부분에 따라서 구별합니다.

 

여기서 

파란 부분을 setupcode , 노란 부분을  cleanupcode, 보라부분을 list of depencies라고 합니다.

위 예시는 채팅앱에서 서버와 연결하는 것을 예시로 들어서 useEffect를 설명합니다.

 

useEffect는 기존 클래스형 리액트에서 함수형 리액트로 넘어오면서  컴퍼넌트가 마운트될 때, 업데이트 될 떄, 언 마운트 될 때 실행되던 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 대신 해주기 위해서 생긴 훅입니다. 이름으로 알 수 있듯이 componentDidMount와 Update는 마운트와 업데이트가 되었다면 
WillUnmount는 Unmount되기 직전에 작동합니다.

그렇다면 useEffect에서 setupcode, cleanupcode, list of depencies는 어떻게  마운트 될 때, 업데이트 될 때, 언 마운트 될 예정일 때 특정 기능 혹은 함수가 작동하도록 할까요?

출처 : 아래 제로초님 생명주기

list of depencies  : 한국말로 의존성 배열인데, 기본적으로 useEffect는 컴퍼넌트가 처음 마운트(실행)될 때 실행합니다. 하지만 컴퍼넌트가 업데이트 될 때 useEffect훅을 실행할 지 말지에 대해서는 depencies에 있는 값들이 변경될 때만 실행됩니다.

setupcode  :  마운트가 된 이후에 실행됩니다. 의존성 배열의 업데이트가 될 때도 실행됩니다.

cleanupcode   : 업데이트가 될 때, 그리고 컴퍼넌트가 사라질 때 실행됩니다. 업데이트가 될 때는 setupcode보다 먼저 실행됩니다.

 

공식문서에서 일반 코드와 비교해서도 언제 setupcode가 작동하는지 , cleanupcode가 작동하는지에 대한 예시와 순서가 있지만 테스트하기 위해서 간단한 앱을 만들었습니다.

  npm init vite로 간단하게 만들어서, count 가 있고, 안에 있는 TestComp를 클릭할 때마다 비트인지 리엑트인지 로고와 글자가 변경되는 앱입니다.

이를 외부에서 TestComp가 존재 여부를 결정하는 isTestComp  상태도 만들었습니다.

import { useState } from 'react';

import './App.css';
import TestComp from './TestComp';
function App() {
  const [count, setCount] = useState(0);
  const [isTestComp, setIsTestComp] = useState(false);
  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        {isTestComp && <TestComp />}
      </div>
      <div
        style={{ color: 'purple', fontSize: '1.5rem', cursor: 'pointer' }}
        onClick={() => {
          setIsTestComp(!isTestComp);
        }}
      >
        {isTestComp ? '사라져라' : '나타나라'}
      </div>
    </>
  );
}

export default App;

 

폴더구조는 아래 사진과 같습니다

 

App바로 아래 있는 TestComp에서는 useEffect 위아래로 콘솔을 찍고. 셋업코드, cleanup코드에서 주석을 찍었습니다.

그리고 의존성 배열로 update값을 주었습니다. 그리고 비교군으로 의존성 배열이 없는 애를 만들었습니다.

import { useState, useEffect } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

const TestComp = () => {
  const [update, setUpdate] = useState(true);

  console.log('유즈이펙트 위에 있는 콘솔');

  useEffect(() => {
    console.log('셋업코드 업데이트 있는 애');
    return () => {
      console.log('클린업코드 업데이트 있는 애');
    };
  }, [update]);

  useEffect(() => {
    console.log('셋업코드 업데이트 없는 애');
    return () => {
      console.log('클린업코드 업데이트 없는 애');
    };
  }, []);

  console.log('유즈이펙트 아래에 있는 콘솔');
  return (
    <div
      onClick={() => {
        setUpdate(!update);
      }}
      style={{ cursor: 'pointer' }}
    >
      이걸로 유즈 이펙트를 테스트하겠습니다. {update ? '비트' : '리액트'}
      <div>
        <span>
          {update ? (
            <img src={viteLogo} className="logo" alt="Vite logo" />
          ) : (
            <img src={reactLogo} className="logo react" alt="React logo" />
          )}
        </span>
      </div>
    </div>
  );
};

export default TestComp;

 

case 1 초기에는  isTestComp가 없는 상황에서 마운트 시켜보겠습니다.

 

 

 

확인 내용 : useEffect 내부 setupcode 실행 시점 및 cleanupcode 실행 여부

마운트가 되고 나서 useEffect가 실행되기 때문에, 콘솔의 위아래 위치 상관없이 셋업코드는 일반코드 이후에                    실행된다. 클린업 코드는 업데이트와 언마운트 시점이 아닌 마운트에선 찍히지 않음

 

 

case2 : count를 바꿔서 부모 컴퍼넌트가 리랜더링 될 때

확인 내용: 의존성 배열의 역할

useEffect에서 의존성배열이 있는 값이 update 되지 않았기 때문에, 컴퍼넌트가 리랜더링 되었음에도 불구하고 useEffect내부 코드는 찍히지 않음

 

case3 : 의존성 배열로 들어있는 update의 상태 변경

(콘솔 한번 지우겠습니다)

 

확인 내용: 업데이트시 클린업코드와 셋업코드 실행 시점 및 의존성 배열 역할

1. 의존성배열에 들어있는 state가 변경된 애만 실행됨

2. 클린업 코드가 샛업코드보다 먼저 실행됨

 

case4 : isTestComp 를 false로 바꿔서 언마운트 될 때

확인 내용:  언마운트 시 클린업 코드만 실행됨 

마운트 업데이트와 달리 일반 코드는 랜더링이 일어나지 않기에 실행되지 않습니다.

유일하게 클린업 코드만 실행됩니다.

 

 

 

 

 

참고문헌

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

(React) React의 생명 주기(Life Cycle) - 라이프사이클

https://react.dev/reference/react/useEffect#useeffect

useEffect – React