React Hooks (useEffect)

안녕하세요! 이번 글에서는 React의 중요한 Hook 중 하나인 useEffect를 쉽고 재미있게 설명드리겠습니다. 이 글을 읽고 나면 useEffect를 언제, 왜, 어떻게 사용해야 하는지 명확히 이해할 수 있을 거예요! 😊

 

1. useEffect는 무엇인가요?

useEffect는 React 함수형 컴포넌트에서 "부수효과(side effects)"를 처리하기 위해 사용하는 Hook입니다.
쉽게 말해, "컴포넌트가 렌더링될 때 실행해야 하는 추가 작업을 설정"하는 도구입니다.

예시: 부수효과란?

• 데이터 가져오기: API에서 데이터를 불러오기
• 구독 설정: WebSocket이나 이벤트 리스너 등록
• 타이머 설정: setInterval이나 setTimeout 사용

 

2. 어떻게 사용하나요?

기본 사용법

useEffect는 React에서 제공하는 함수이므로, 반드시 import 해야 합니다:

import React, { useEffect } from 'react';

 

기본적인 사용 예는 다음과 같습니다:

useEffect(() => {
  // 실행할 코드
});

 

예시: 화면에 문구 출력하기

아래는 컴포넌트가 렌더링될 때 콘솔에 메시지를 출력하는 간단한 예제입니다:

import React, { useEffect } from 'react';

function HelloWorld() {
  useEffect(() => {
    console.log("컴포넌트가 화면에 렌더링되었습니다!");
  });

  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

 

코드 설명

1. useEffect 안의 함수는 컴포넌트가 렌더링될 때마다 실행됩니다.
2. 여기서는 "컴포넌트가 렌더링되었습니다!"라는 메시지를 콘솔에 출력합니다.

 

3. 의존성 배열로 실행 타이밍 제어하기

useEffect는 기본적으로 컴포넌트가 렌더링될 때마다 실행됩니다.
하지만, 의존성 배열(dependency array)을 사용하면 실행 시점을 제어할 수 있습니다.

의존성 배열의 3가지 패턴

1. 빈 배열 ([])
   컴포넌트가 처음 렌더링될 때만 실행됩니다.

useEffect(() => {
  console.log("처음 한 번만 실행됩니다!");
}, []);

   

    2. 특정 값이 들어간 배열 ([value])
        배열에 있는 값이 변경될 때만 실행됩니다.

useEffect(() => {
  console.log("값이 변경될 때 실행됩니다!");
}, [value]);

   

    3. 배열 생략
        컴포넌트가 렌더링될 때마다 실행됩니다.

useEffect(() => {
  console.log("렌더링될 때마다 실행됩니다!");
});

 

예시: 버튼 클릭 시 메시지 변경

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`버튼이 ${count}번 클릭되었습니다.`);
  }, [count]); // count가 변경될 때만 실행

  return (
    <div>
      <p>버튼 클릭 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default ClickCounter;

 

코드 설명

1. useEffect는 count가 변경될 때마다 실행됩니다.
2. 따라서 콘솔에 count의 최신 값이 출력됩니다.

 

4. 클린업(cleanup) 함수 사용하기

useEffect는 컴포넌트가 제거(unmount)되거나 업데이트되기 직전에 실행할 코드를 정의할 수 있습니다.
이를 클린업(cleanup) 함수라고 합니다.

예시: 타이머 정리하기

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 클린업 함수: 타이머 정리
    return () => {
      clearInterval(interval);
    };
  }, []); // 빈 배열: 처음 렌더링될 때만 실행

  return <p>타이머: {seconds}초</p>;
}

export default Timer;

코드 설명

1. setInterval로 1초마다 seconds를 증가시킵니다.
2. 컴포넌트가 제거될 때 clearInterval로 타이머를 정리합니다.

 

5. 실생활 비유로 이해하기

useEffect란?

useEffect는 알람 시계와 비슷합니다:

• 특정 조건에서 알람이 울리도록 설정 (의존성 배열)
• 필요 없을 때는 알람을 끔 (클린업 함수)

 

useEffect는 React에서 다음과 같은 작업에 필수적입니다:

• 데이터 가져오기
• 구독 설정 및 해제
• 타이머 관리

기본 구조와 의존성 배열을 이해하면 다양한 상황에서 효과적으로 사용할 수 있습니다.