[React] Hooks - useEffect

useEffect란 무엇인가?

React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.

클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.

useEffect 사용방법

useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.

• 렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 후에 호출돤다. 이는 브라우저의 레이아웃과 페인트가 완료된 후에 실행된다는 것을 의미한다.
• 의존성 배열: 의존성 배열을 사용하여 언제 useEffect가 실행될지 제어할 수 있다. 이 배열 안에 있는 값이 변경될 때마다 Effect가 실행된다.

의존성 배열  ❌

useEffect(() => {
  // 의존성 배열이 없으면 컴포넌트가 렌더링될 때마다 호출됨
  console.log("항상 실행됩니다.");
});

의존성 배열  ⭕

// 의존성 배열이 빈 경우 처음 렌더링될 때만 Effect가 실행된다.
useEffect(() => {
  console.log("한 번만 실행됩니다.");
}, []);

// 의존성 배열이 count에 의존하여 count 값이 변경될 때만 Effect가 실행된다.
useEffect(() => {
  console.log(`count 값이 변경되었습니다: ${count}`);
}, [count]);

useEffect의 정리함수 반환

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

  // 정리 함수: 타이머를 정리
  return () => {
    clearInterval(timer);
    console.log("타이머가 정리되었습니다.");
  };
}, []);

 

참고문헌

useEffect – React