[React] useEffect 정리하기

UseEffect 훅의 용도

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

예제 코드

import {useEffect} from "react";

function App() {

  useEffect(() => {
    console.log("화면 렌더링 됨.");
  })

  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;

return 문에 정의된 JSX가 렌더링 될때마다 useEffect가 호출됩니다.

---

useEffect의 파라미터 

 

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

useEffect 함수는 화면이 렌더링 될 때 실행할 콜백 함수와 렌더링을 유발하는 대상 리스트를 파라미터로 넘겨줄 수 있습니다.

 

그냥 넘어가면 섭섭하니 EffectCallback이란 타입도 한 번 살펴보고 넘어갈 필요가 있겠네요.

 

effect : EffectCallback

type EffectCallback = () => (void | (() => void | undefined));

위와 같은 타입식이 나왔네요. 

콜백 함수는 리턴 값으로 void 나  인자없이  void를 반환하는 함수를 반환할 수 있네요.

 

void를 반환하는 경우는 위의 예제와 같습니다. 화면이 렌더링 될 때 함수의 로직이 실행됩니다.

하지만 함수를 반환하는 경우, 그 함수는 컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 실행됩니다.

 

예제 코드

import {useEffect, useState} from "react";

function App() {

  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    console.log("화면 렌더링 됨.");

    return () => {
      console.log("cleanup");
    }
  })

  const onClick = () => {
    setToggle(prev => !prev);
    console.log(`toggle : ${toggle}`)
  }

  return (
    <div>
      <h1>Hello</h1>
      <button onClick={onClick}>리렌더링 버튼</button>
    </div>
  );
}

export default App;

 

toggle 이라는 상태 변수를 정의하고, 버튼을 통해 이 값이 계속 변하도록 만들었습니다.

기본적으로 state가 변하면 리액트는 컴포넌트를 리렌더링하게 됩니다.

 

크롬 콘솔을 통해 toggle 값이 변하면서 렌더링 전에 cleanup이 콘솔에 찍히는걸 확인할 수 있습니다.

 

deps : DependencyList 

type DependencyList = ReadonlyArray<any>;

타입 이름만 봐도 배열을 감싸 읽기만 가능하게 만든 클래스처럼 보이네요. 

특정 값이 업데이트 될 때만 콜백함수를 실행시키고 싶을 때, 이 파라미터에 그 특정 대상을 지정해줄 수 있습니다.

---