[React] Hook : useState와 useEffect

React에서 Hook은 함수형 컴포넌트에서 상태와 생명주기 관련 기능을 사용할 수 있도록 도와주는 기능입니다.

 

useState : 상태 관리를 위한 Hook

useState는 함수형 컴포넌트에서 상태(State)를 관리하기 위한 Hook입니다.

React 클래스 컴포넌트의 this.state와 유사하지만, 훨씬 간결하게 사용할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);
 
 return (
  <div>
   <p>현재 카운트: {count}</p>
   <button onClick={() => setCount(count + 1)}>
    증가
   </button>
  </div>
 );
}

 

• useState 함수는 배열을 반환합니다.
  • 첫 번째 요소 : 상태 값(예 : count)
  • 두 번째 요소 : 상태를 업데이트하는 함수(예 : setCount)
• 초기 상태는 useState(초기값)의 인자로 전달합니다.
• set함수명을 호출하면 상태가 업데이트되고 컴포넌트가 다시 랜더링 됩니다.

---

useEffect : 사이드 이펙트를 처리하기 위한 Hook

useEffect는 함수형 컴포넌트에서 사이드 이팩트를 수행하기 위한 Hook입니다.

사이드 이펙트란 데이터 가져오기, DOM 수정, 구독 설정 등의 작업을 의미합니다.

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); // 정리(clean-up) 함수
  }, []); // 의존성 배열이 비어 있으면 컴포넌트가 마운트될 때만 실행

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

 

• useEffect(이펙트 함수, 의존성 배열) 형태로 사용됩니다.
• 이펙트 함수 : 렌더링 후 실행될 작업을 정의합니다.
• 의존성 배열 배열에 명시된 값이 변경될 때만 이펙트 함수가 실행됩니다.
  • 배열이 비어 있으면 컴포넌트가 처음 마운트될 때만 실행됩니다.
  • 의존성 배열을 생략하면 컴포넌트가 랜더링 될 때마다 실행됩니다.
• 정리 함수 : 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됩니다.

* 의존성 배열에 포함되지 않은 값은 변경되더라도 이펙트 함수가 실행되지 않습니다.

* 무한 루프를 방지하려면 의존성 배열을 올바르게 설정해야 합니다.

---

Summary

React의 useState와 useEffect는 함수형 컴포넌트에서 상태 관리와 생명주기를 쉽게 처리할 수 있도록 도와주는 도구입니다. 

• useState : 상태 값을 정의하고 관리
• useEffect : 렌더링 후 작업 수행 및 정리 작업 처리