[React] useEffect, useState

1. useState - 상태 관리 (State Management)

 

useState는 컴포넌트의 상태를 선언하고 관리할 때 사용되는 React 훅입니다. 상태란 사용자 입력, API 응답 데이터, 컴포넌트 내의 동적 값을 의미합니다.

 

사용법:

const [state, setState] = useState(initialValue);

• state: 현재 상태 값.

• setState: 상태 값을 업데이트하는 함수.

• initialValue: 상태의 초기 값.

 

예제:

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);  // count의 초기값은 0

  const handleIncrement = () => {
    setCount(count + 1);  // 상태 업데이트
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={handleIncrement}>증가</button>
    </div>
  );
};

export default Counter;

 

설명:

• **초기값은 0**으로 설정되며, 버튼을 클릭하면 count 값이 1씩 증가합니다.

• **setCount(count + 1)**을 호출하면 컴포넌트가 다시 렌더링되면서 최신 상태가 화면에 표시됩니다.

 

 

2. useEffect - 사이드 이펙트 관리 (Side Effect Handling)

 

useEffect는 렌더링 후 수행해야 하는 작업(사이드 이펙트)을 처리하기 위해 사용됩니다. 여기서 사이드 이펙트란 데이터를 가져오거나, DOM을 직접 조작하거나, 구독/타이머 등의 작업을 의미합니다.

 

사용법:

useEffect(() => {
  // 실행할 작업 (예: API 호출, 타이머 설정 등)
  
  return () => {
    // 정리(cleanup) 작업 (예: 이벤트 리스너 제거, 타이머 해제 등)
  };
}, [dependencies]);

• 첫 번째 매개변수: 실행할 콜백 함수.

• 두 번째 매개변수 (의존성 배열):

• 빈 배열 [] → 컴포넌트가 처음 마운트될 때 한 번만 실행.

• 상태나 props 배열 [state, prop] → 해당 값이 변경될 때마다 실행.

 

예제:

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);  // 1초마다 count 증가

    // 컴포넌트가 언마운트될 때 정리(cleanup) 작업
    return () => clearInterval(interval);
  }, []);  // 빈 배열이므로 컴포넌트가 마운트될 때 한 번만 실행됨

  return <p>초: {count}</p>;
};

export default Timer;

 

설명:

• 컴포넌트가 처음 렌더링되면 1초마다 count가 1씩 증가합니다.

• 컴포넌트가 언마운트될 때 clearInterval을 호출하여 타이머를 정리합니다.

 

 

3. 의존성 배열의 동작 이해

 

의존성 배열은 useEffect가 언제 다시 실행될지를 결정합니다.

의존성 배열의 동작	의존성 배열설명
[]	컴포넌트가 처음 마운트될 때 한 번만 실행
[state]	state가 변경될 때마다 실행
의존성 배열 생략 (null)	컴포넌트가 리렌더링될 때마다 실행

 

예제

useEffect(() => {
  console.log("상태가 변경되었습니다.");
}, [count]);  // count가 변경될 때마다 실행

 

 

4. 예제: useState와 useEffect를 함께 사용하는 경우

 

회원 목록 불러오기 예제

import React, { useEffect, useState } from "react";
import { ClassService } from "src/services/ClassService";

const MemberList = () => {
  const [members, setMembers] = useState([]);

  useEffect(() => {
    const fetchMembers = async () => {
      try {
        const response = await ClassService.getMembers();
        setMembers(response.data);  // 상태 업데이트
      } catch (error) {
        console.error("Error fetching members:", error);
      }
    };

    fetchMembers();
  }, []);  // 처음 마운트될 때 한 번 실행

  if (members.length === 0) {
    return <p>회원 정보가 없습니다.</p>;
  }

  return (
    <ul>
      {members.map((member) => (
        <li key={member.id}>{member.name}</li>
      ))}
    </ul>
  );
};

export default MemberList;

 

설명:

• **useState**는 API에서 불러온 회원 정보를 관리합니다.

• **useEffect**는 컴포넌트가 렌더링될 때 한 번만 호출되어 데이터를 불러옵니다.

• 회원 목록이 화면에 표시되며, 상태가 업데이트되면 자동으로 렌더링됩니다.

 

 

5. 정리

훅	설명	사용 예제
useState	컴포넌트에서 동적 데이터를 관리하는 상태 훅	사용자 입력값, API 응답 데이터 등
useEffect	컴포넌트 렌더링 후 비동기 작업이나 DOM 조작을 처리하는 훅	API 호출, 구독, 타이머 설정 등

 

useState는 데이터를 저장하고 관리, useEffect는 그 데이터를 가져오거나 관리할 때 필요한 작업을 수행하는 방식으로 협력합니다.

 

 

 

 

출처 : ChatGPT