[React] 리액트 Hooks (2) - useEffect

📌 언제 useEffect를 사용하나요?

어떤 컴포넌트가

• Mount 되었을 때 (화면에 첫 렌더링)
• Update 되었을 때 (다시 렌더링)
• Unmount 되었을 때 (화면에서 사라짐)

useEffect 를 사용합니다.

 

📌 useEffect 사용 방법

[빈 배열]

 

useEffect는 인자로 콜백함수를 사용합니다.

useEffect(()=>{
    // 작업
});

 

이런 형태로 사용한다면 컴포넌트가 마운트, 업데이트될 때 실행됩니다.

 

[의존성 배열]

useEffect(()=>{
    // 작업
}, [value]);

 

이렇게 인자로 배열을 전달한다면, 매번 렌더링이 될 때마다 실행되지 않고 마운트될 때와 배열 value 값이 바뀔 때 마다 실행됩니다. 만약 빈 배열을 넣으면 컴포넌트가 맨 처음 화면에 렌더링될 때만 실행됩니다.

 

Clean up: return 값

  useEffect(() => {
    // 타이머 기능...
    return () => {
      // 타이머 해제...
      // Clean Up (정리)) 작업 처리
    };
  }, []);

 

이렇게 함수를 리턴해주면 해당 컴포넌트가 언마운트될 때, 혹은 다음 렌더링 시 useEffect가 실행되기 전에 함수가 실행됩니다. 예제 코드에서는 임의로 타이머 기능을 추가하고 리턴값으로 타이머 해제라는 정리 작업 코드를 넣는 경우를 생각했습니다. 자세한 내용은 직접 코드를 작성하면서 정리해보겠습니다.

 

 

⭐️ useEffect: 카운터 실습

useState

Update 버튼을 누르면 count가 1씩 증가하는 카운터 코드를 작성했습니다. useState를 이용해 count를 관리합니다.

const App = () => {
  const [count, setCount] = useState(0);

  const handledCountUpdate = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handledCountUpdate}>Update</button>
      <h3>count: {count}</h3>
    </div>
  );
};

export default App;

 

이제 이 코드에서 useEffect를 사용해보겠습니다.

  // 렌더링 될 때마다 매번 실행됨
  useEffect(() => {
    console.log("🥳 렌더링되었습니다!");
  });

 

렌더링 될 때마다 정말 매번 실행되는지 확인하기 위하여 콘솔로 확인해보겠습니다.

 

실제로 처음 렌더링될 때, 그리고 state가 업데이트될 때마다 콘솔에 렌더링되었다는 메세지가 계속 출력되는 것을 확인할 수 있습니다.

이제 input 태그와 함께 name이 변경될 때마다 컴포넌트를 렌더링 해보겠습니다.

 

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

  const handledCountUpdate = () => {
    setCount(count + 1);
  };

  const handleInputChange = (e) => {
    setName(e.target.value);
  };

  // 렌더링 될 때마다 매번 실행됨
  useEffect(() => {
    console.log("🥳 렌더링되었습니다!");
  });

  return (
    <div>
      <button onClick={handledCountUpdate}>Update</button>
      <h3>count: {count}</h3>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name: {name}</span>
    </div>
  );
};

export default App;

 

input에서 값을 입력할 때마다 렌더링되었다고 출력되고 있습니다. 뿐만 아니라 카운트를 업데이트 할 때 역시 렌더링 메세지가 여전히 출력됩니다. 즉, 이 코드는 useEffect를 렌더링될 때마다 실행하고 있다는 것을 알 수 있습니다. 우리가 만약 단순히 console.log로 메세지를 출력하는 것이 아니라, 무거운 작업을 넣는다면 비효율적인 코드가 될 것입니다.

 

의존성 배열

name이 업데이트될 때는 실행을 하지 않고, count가 업데이트될 때만 실행을 하고 싶다면 어떻게 할까요?

두 번째 인자로 [count] 배열을 넘겨주면 됩니다. 이 배열을 의존성 배열(Dependency Array)이라고 합니다. 의존성 배열을 추가하면 useEffect가 처음 화면에 렌더링될 때와, 카운트라는 값이 변할 때만 불리게 됩니다.

 

useEffect 코드를 다음과 같이 변경해보겠습니다.

  useEffect(() => {
    console.log("💚 count 변화");
  }, [count]);

 

렌더링될 때마다 | 마운트될 때만 | 마운팅 + value 값 변경될 때마다

이렇게 name이 변경되었을 때는 콘솔에 메세지가 출력되지 않고, 맨 처음 컴포넌트가 렌더링될 때와, 카운트가 업데이트될 때만 출력되는 것을 알 수 있습니다. 반대로 의존성 배열에 name 값을 넣는다면 name이 업데이트될 때만 실행됩니다.

  // 렌더링마다 매번 실행
  useEffect(() => {
    console.log("🤍 렌더링");
  });

  // 마운팅 + count 변경될 때마다 실행
  useEffect(() => {
    console.log("💚 count 변화");
  }, [count]);

  // 마운팅 + name 변경될 때마다 실행
  useEffect(() => {
    console.log("🩷 name 변화");
  }, [name]);

 

추가로, 마운트될 때만 실행시키고 싶다면 빈 배열을 넣으면 됩니다.

  // 빈 배열을 넣으면 마운트될 때만 실행
  useEffect(() => {
    console.log("💛 마운팅");
  }, []);

 

🧹 Clean up (정리 작업): 타이머 실습

이제 정리 작업을 실습해보겠습니다.

먼저 Toggle Timer라는 버튼을 만들고, 그 버튼을 누르면 타이머를 시작한다는 메세지를 보여주도록 하겠습니다.

const App = () => {
  const [showTimer, setShowTimer] = useState(false);

  return (
    <div>
      {showTimer && <Timer />}
      <br></br>
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
};

export default App;

 

타이머를 시작한다는 메세지와 함께 콘솔에 타이머를 실행한다고 출력하는 컴포넌트 Timer의 코드는 다음과 같습니다.

const Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 실행 중...");
    }, 1000);
  }, []);
  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  );
};

export default Timer;

 

콘솔에 1초마다 "타이머 실행 중..."이라는 메세지가 찍힙니다. 그런데, 이렇게 코드를 작성하면 Toggle Timer 버튼을 한 번 더 눌러 타이머 컴포넌트를 안 보이게 만들어도 콘솔에는 여전히 1초마다 "타이머 실행중" 메세지가 보입니다. 이는 정리 작업을 하지 않아서 발생하는데, 정리를 하기 위해서는 useEffect 리턴값으로 함수를 넣으면 됩니다. 그리고 그 함수 안에서 정리 작업을 하면 됩니다.

 

리턴값은 컴포넌트가 언마운트될 때 실행된다고 생각하면 됩니다.

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 실행 중...");
    }, 1000);

    return () => {
      // 정리 작업, 즉 컴포넌트가 언마운트될 때 실행
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []); // 빈 배열을 전달하여 마운트될 때만 실행

 

이제 버튼을 누르면 타이머 실행 중 메세지가 출력되고 한 번 더 눌러 타이머를 끄면 종료되었다는 메세지가 정상적으로 출력되는 것을 볼 수 있습니다.

 

참고 자료

https://www.youtube.com/watch?v=kyodvzc5GHU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko/

 

[번역] useEffect 완벽 가이드