[React] React 훅(Hooks) : useState와 useEffect

이전 글: React 훅(Hook)의 정의와 특징

훅(Hook)이란?

• 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수

---

훅의 종류

React는 여러 가지 기본 훅을 제공한다. 가장 많이 사용되는 훅은 다음과 같다.

1. useState: 상태를 관리
2. useEffect: 부수 효과(Side Effect)를 관리
3. useContext: Context API를 사용하여 전역 상태를 관리
4. useReducer: 복잡한 상태 로직을 관리

---

useState와 useEffect 설명

1. useState

• 상태를 선언하고 업데이트할 수 있게 해주는 훅
• 상태가 변경되면 컴포넌트가 리렌더링된다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. useEffect

• 부수 효과를 수행하는 훅
• 컴포넌트가 렌더링된 후에 실행되며, 의존성 배열[]에 따라 실행 시점을 제어할 수 있다.

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

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

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

    return () => {
      clearInterval(timer); // 클린업 함수
    };
  }, []); // 빈 의존성 배열: 마운트 시 한 번만 실행

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

---

useState와 useEffect를 함께 사용한 예시

useState로 상태를 관리하고, useEffect로 상태 변경에 따른 부수 효과를 처리하는 예시

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

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  // count가 변경될 때마다 실행
  useEffect(() => {
    if (count > 10) {
      setMessage('Count가 10을 넘었습니다!');
    } else {
      setMessage('Count가 10 이하입니다.');
    }
  }, [count]); // 의존성 배열: count

  return (
    <div>
      <h1>Count: {count}</h1>
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default App;

동작 설명

1. useState:
   • count: 현재 카운트 값을 저장
   • setCount: 카운트 값을 업데이트
   • message: 상태에 따른 메시지를 저장
2. useEffect:
   • count가 변경될 때마다 실행
   • count가 10을 넘으면 메시지를 업데이트

---

요약

• 훅(Hook)은 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있게 함.
• useState: 상태를 선언하고 업데이트
• useEffect: side effect를 처리하고, 클린업 함수를 통해 리소스를 정리
• 함께 사용: useState로 상태를 관리하고, useEffect로 상태 변경에 따른 부수 효과를 처리