2024-09-02

React Hooks를 이용한 상태 관리

1. React Hooks 소개

React Hooks는 함수형 컴포넌트에서 상태와 라이프사이클 기능 사용 가능.
useState, useEffect는 기본적인 Hook으로 중요.

2. useState: 상태 관리의 기본

useState는 상태 변수를 선언하고, 상태를 업데이트하는 함수 제공.
사용법: const [state, setState] = useState(initialValue);
예시:

import React, { useState } from 'react';

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

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

useState(0)로 초기 상태값 0 설정, count 상태와 setCount 상태 업데이트 함수 제공
버튼 클릭 시 setCount 호출로 상태 변경, 컴포넌트 자동 재렌더링

3. useEffect: 부수 효과 관리

useEffect는 컴포넌트 렌더링 시 특정 작업(부수 효과) 수행
데이터 가져오기, 구독 설정, DOM 조작 등에 사용
사용법:

useEffect(() => {
  // 부수 효과 코드 작성
  return () => {
    // 선택적 정리(cleanup) 코드 작성
  };
}, [dependencies]);

예시:

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <p>Fetched Data: {data}</p>
    </div>
  );
}

컴포넌트 마운트 시 useEffect 실행, API 호출로 데이터 가져와 data 상태 업데이트
dependencies 배열에 상태나 props 추가 시 값 변경될 때마다 useEffect 재실행

4. useState와 useEffect를 함께 사용하기

예시: 간단한 Todo 리스트 애플리케이션

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

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

컴포넌트 초기 렌더링 시 useEffect로 localStorage에서 기존 Todo 불러오기
todos 상태 변경 시마다 localStorage에 저장