[Next.js14 강의] 16강 - React의 useState와 useEffect 사용법

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 React의 주요 훅인 useState와 useEffect를 사용하는 방법을 학습합니다. 이 두 훅은 React에서 상태 관리와 사이드 이펙트를 다루는 데 필수적이며, Next.js에서도 동일하게 적용됩니다. 이 강의는 처음 사용하는 초보자들도 이해할 수 있도록 쉽게 설명합니다.

 

 

1. useState: 상태 관리하기

 

useState란?

useState는 함수형 컴포넌트에서 상태를 추가할 수 있도록 해주는 훅입니다. 상태가 변하면 컴포넌트는 다시 렌더링되며, 최신 상태값을 반영합니다.

반응형

기본 사용법

useState는 배열을 반환하며, 첫 번째 값은 상태 변수, 두 번째 값은 상태를 업데이트하는 함수입니다.

import { useState } from 'react';

function Counter() {
  // count는 상태 변수, setCount는 상태를 변경하는 함수
  const [count, setCount] = useState(0);

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

 

 

초기 상태값 설정

useState는 초기 상태값을 인자로 받습니다. 이 값은 숫자, 문자열, 객체, 배열 등 모든 JavaScript 데이터 유형이 가능합니다.

728x90

상태 업데이트 함수 사용

상태를 업데이트할 때, 이전 상태값에 의존할 경우 콜백 함수를 사용할 수 있습니다.

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

  const increment = () => {
    // 이전 상태값에 의존하여 업데이트
    setCount((prevCount) => prevCount + 1);
  };

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

 

 

 

2. useEffect: 사이드 이펙트 처리하기

 

useEffect란?

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 합니다. 이 작업을 "사이드 이펙트"라고 부르며, 데이터 가져오기, DOM 업데이트, 구독 설정 등을 포함합니다.

SMALL

기본 사용법

useEffect는 함수와 의존성 배열을 인자로 받습니다. 함수는 컴포넌트가 마운트될 때 실행되며, 의존성 배열에 있는 값이 변경될 때마다 다시 실행됩니다.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 실행
    return () => clearInterval(interval);
  }, []); // 빈 배열은 컴포넌트가 처음 렌더링될 때만 실행되도록 설정

  return <div>타이머: {count}초</div>;
}

 

 

의존성 배열 (Dependency Array)

· 의존성 배열에 변수를 추가하면, 해당 변수가 변경될 때마다 useEffect가 재실행됩니다.
· 의존성 배열을 빈 배열로 설정하면, useEffect는 컴포넌트가 처음 렌더링될 때만 실행됩니다.

// 의존성 배열에 특정 상태를 넣은 예시
useEffect(() => {
  console.log('count가 변경되었습니다:', count);
}, [count]); // count가 변경될 때마다 실행

 

클린업 함수 (Cleanup Function)

· useEffect 내부에서 반환하는 함수는 컴포넌트가 언마운트되거나, 의존성이 변경되기 전에 실행됩니다. 이 함수는 타이머, 구독 등을 정리할 때 유용합니다.

useEffect(() => {
  const handleResize = () => {
    console.log('윈도우 크기 변경:', window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

  // 정리 작업
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 한 번만 실행

 

 

3. useState와 useEffect의 결합

useState와 useEffect를 함께 사용하여 상태 변화에 따라 사이드 이펙트를 처리할 수 있습니다.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []); // 컴포넌트가 마운트될 때 한 번 실행

  if (loading) return <div>로딩 중...</div>;

  return <div>데이터: {JSON.stringify(data)}</div>;
}

 

 

 

 

 

- 이전 수업 목록