React useState와 useEffect

📜 useState와 useEffect 기본 사용법

React에서는 상태 관리와 사이드 이펙트를 처리하기 위해 두 가지 주요 훅인 useState와 useEffect를 사용합니다. 이들 훅은 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있게 해 줍니다.

🔍 useState 훅

useState는 컴포넌트의 상태를 관리할 때 사용되는 훅입니다. 이 훅을 통해 상태 변수와 그 값을 변경하는 함수를 선언할 수 있습니다.

📌 useState 기본 사용법

useState는 배열을 반환합니다. 첫 번째 요소는 현재 상태의 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.

import { useState } from 'react';

function Counter() {
  // 상태 변수 'count'를 선언하고, 초기값을 0으로 설정
  const [count, setCount] = useState(0);

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

위 예제에서는 count라는 상태 변수와, 이를 변경하는 setCount 함수를 사용하여 카운트를 증가시키는 버튼을 만들었습니다.

📝 useEffect 훅

useEffect는 컴포넌트의 생명주기 동안 발생하는 사이드 이펙트를 처리하는 훅입니다. 예를 들어, API 호출, DOM 조작, 타이머 설정 등 다양한 비동기 작업을 처리할 수 있습니다.

📌 useEffect 기본 사용법

useEffect는 함수형 컴포넌트가 렌더링 된 후에 실행되는 사이드 이펙트를 정의합니다. 기본적으로 컴포넌트가 마운트 될 때와 업데이트될 때마다 실행됩니다.

import { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  // 1초마다 타이머 업데이트
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 타이머를 정리
    return () => clearInterval(interval);
  }, []); // 빈 배열로 설정하여 컴포넌트 마운트 시 한 번만 실행

  return (
    <div>
      <p>경과 시간: {time}초</p>
    </div>
  );
}
  

위 예제에서는 useEffect를 사용하여 타이머를 설정하고, 컴포넌트가 원마운트될 때 타이머를 정리하는 방법을 보여줍니다.

💡 useState와 useEffect 함께 사용하기

useState와 useEffect는 함께 사용하여 복잡한 상태와 비동기 작업을 처리할 수 있습니다.

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 데이터 fetch
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('데이터 로드 실패:', error);
        setLoading(false);
      });
  }, []); // 빈 배열로 설정하여 한 번만 실행

  if (loading) {
    return <p>로딩 중...</p>
  }

  return (
    <div>
      <h1>데이터를 불러왔습니다!</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}
  

🎯 요약

• useState: 컴포넌트의 상태를 관리하는 훅입니다. 상태 변수를 선언하고, 해당 상태를 업데이트하는 함수를 반환합니다.
• useEffect: 컴포넌트의 생명주기 동안 사이드 이펙트를 처리하는 훅입니다. 주로 데이터 가져오기, 타이머 설정, 구독 등을 처리합니다.
• useState와 useEffect 함께 사용하기: 상태 관리와 비동기 작업을 결합하여 복잡한 로직을 처리할 수 있습니다.