React Hook - useEffect

하영·2024년 8월 19일

React

목록 보기

7/17

리액트에는 정말 많은 Hook이 있다. 이걸 정말 다 써서 만든걸까 싶은데 아무튼 많다. 알고 안 쓰는거랑 모르고 안 쓰는건 차이가 있으니까 짧고 간단하게 예제코드들로 훅들을 정리해보려고한다.
그 첫번째 타자는 바로 useEffect다!

useEffect

useEffect를 공부하면서 중요하다고 생각한건 바로 의존성배열이다.
useEffect를 활용한 코드를 작성할 때 이 의존성배열을 넣느냐 마느냐에 따라 구현이 다르게 되었기 때문이다.

useEffect에서 의존성배열에 따른 실행 차이

의존성 배열 없을 때 : 모든 렌더링 후 실행
빈배열의 의존성배열 : 마운트 될 때만! 실행
[ item ] 의존성배열 : 마운트 될 때 + [ item ] 배열 안의 item이 변경되면 실행

간단한 코드로 보면서 이해해보자

import { useState, useEffect } from "react";

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

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

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

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

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

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

  // 마운팅 될 때만 실행
  useEffect(() => {
    console.log("마운팅");
  }, []);

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

export default App;

??? : 님 이게 간단? 할 수 있는데 잘 보면 의존성배열만 바꿔줬을 뿐 별 내용 없는 코드다.
주석으로 설명해놓았지만 콘솔로 확인하면 더 잘 이해가 된다.

✅ 콘솔로 확인하기

맨 처음 렌더링 될 때는 모든 useEffect가 실행되면서 콘솔에 남고,
그 다음 count 버튼을 2번 눌렀을 때 콘솔에 count가 2번 찍혔다.
그리고 input의 값을 변경하면 해당 useEffect의 콘솔이 남는다.

사실 useEffect를 쓸 때 한 가지 더 알아두어야하는게 있는데 바로 clean up 함수이다. (의존성배열과 더불어 이것 때문에 useEffect를 쓰는 것 같기도 하다.)

clean up 함수

⏰ 타이머 예제코드로 알아보기

App.jsx 컴포넌트

import { useState } from "react";
import Timer from "./component/Timer";

function App() {
  const [showTimer, setShowTimer] = useState(false);
  
  return (
    <div>
      {showTimer && <Timer />} //showTimer가 true일때만 Timer 컴포넌트 보여주기
      
      <button
        onClick={() => {
          setShowTimer(!showTimer); 
    	//클릭하면 false <-> true 왔다갔다 하는 토글 기능
        }}
      >
        Toggle Timer
      </button>
      
    </div>
  );
}

export default App;

느낌표(!)는 논리 부정 연산자로 사용되는데 논리 값을 반전시킨다.
즉, 피연산자가 true면 false로, false면 true로 바꾸니까 이를 활용해서 토글버튼을 만든 것이다.

Timer.jsx 컴포넌트

import { useEffect } from "react";

function Timer() {

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 돌아가는 중...");
    }, 1000);

    //clean up 함수 - 언마운트 되면 실행
    return () => {
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []);

  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  );
}

export default Timer;