[React] useEffect hook 쉽게 알아보기

✔ 들어가며

useEffect, 직역하면 효과를 이용한다. 그럼 무슨 효과냐면?

state 바뀌면서 생기는 "side effect", 부가적인 효과들을 useEffect 훅 안에서 수행할 수 있게 해준다.
(Side effect: component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과) 

 

 

✔ 예제로 알아보는 useEffect

 

💡 exam

count가 업데이트될 때 document.title에 count를 업데이트해줘! 하는 코드다.

import React, { usestate, useEffect } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

 

useEffect는 안에서 state가 변경이 되고 리렌더링이 트리거 됐을 때, 원하는 동작들이 수행되기 위한 리액트 훅(hook)이다.

이 컴포넌트에서 리랜더링을 트리거할만한 것이  count state 하나이기 때문에, 위 코드는 잘 작동한다.

 

💡 exam

count state뿐 아니라 name state가 추가된 코드 ( 2개 이상의 state의 경우 )

import React, { usestate, useEffect } from "react";

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <input onChange={(e) => setName(e.target.name)} />
      <p>
        Hello, ${name}. You clicked {count} times
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

위 코드 처럼 useEffect를 사용하면 name이 바뀔 때도 document.title이 리 렌더링 된다.

useEffect 훅이 현재 어떤것에 dependent(의존) 할지 모르기 때문이다.

 

 

🔧 fixed code

useEffect(() => {
    document.title = `You clicked ${count} times`;
}, [count]);

useEffect 훅에서 첫번째 callback 함수를 넣어주고, 두 번째 인자로 dependency array( 의존성 배열 )을 넣어준다.

count가 바뀌었을때만 실행을 해라! 선언해주는 부분이다.

 

 

✔ component 마운트 됐을 때만 실행시키고 싶을 때

💡 exam

  useEffect(() => {
    /* do something */
  }, []);

컴포넌트 내부 한 번만 실행하면 되는 코드들은 리 렌더링 할 때마다 실행되지 않아야 한다.

useEffect안에 넣어주되 두 번째 인자로 빈 배열을 넣어주게 되면, 안에 있는 코드들은 컴포넌트가 처음 마운트 될 때만 실행되고 후에 실행되지 않는다.

 

 

✔ Cleanup Function

💡 exam

import { useEffect } from "react";

function Example() {
  /* some code */
  useEffect(() => {
    const handleKeydown = (e) => {
      if (e.key === "enter") {
        submit();
      }
    };
    window.addEventListener("keydown", handleKeydown);

    return () => {
      window.removeEventListener("keydown", handleKeydown);
    };
  }, []);
}

 

• useEffect안에 handleKeydown이라는 함수를 만들고, 이 함수를 'keydown'이라는 이벤트로 추가했다.
• useEffect가 return 하는 함수엔 removeEventListener로 handleKeydown라는 함수를 제거해주고 있다.

useEffect() 함수의 return 값으로 콜백 함수를 설정하면 컴포넌트가 언마운트 혹은 업데이트 되기 직전에 이 함수가 실행된다. 리 랜더링 될 때 혹은 언마운트될 때 추가했던 이벤트 리스너를 제거해줌으로써, 컴포넌트가 마운트 해제됐을 때 잉여 이벤트를 제거해줄 수 있다.

이벤트 리스너를 넣어주거나 웹소켓 커넥션을 열거나 했을 땐 cleanup function에 꼭 넣어주자.