State와 생명주기

State란?

State는 컴포넌트의 데이터를 저장하고 관리하는 객체입니다. 컴포넌트의 상태가 변경되면 React는 자동으로 리렌더링을 수행합니다.

useState Hook

import { useState } from 'react';

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

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

여러 개의 State 사용하기

function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [isStudent, setIsStudent] = useState(false);

  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      {/* 다른 입력 필드들 */}
    </form>
  );
}

객체 형태의 State

function UserProfile() {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    isStudent: false
  });

  const updateUser = (field, value) => {
    setUser(prev => ({
      ...prev,
      [field]: value
    }));
  };
}

State 업데이트 시 주의사항

1. State 업데이트는 비동기적

// 잘못된 방법
setCount(count + 1);
setCount(count + 1); // 원하는 결과가 안나올 수 있음

// 올바른 방법
setCount(prev => prev + 1);
setCount(prev => prev + 1); // 확실히 두 번 증가

2. 객체/배열 업데이트

// 잘못된 방법
const newUser = user;
newUser.name = '새이름';
setUser(newUser);

// 올바른 방법
setUser(prev => ({
  ...prev,
  name: '새이름'
}));

컴포넌트 생명주기

함수형 컴포넌트에서는 useEffect Hook을 사용하여 생명주기를 관리합니다.

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 마운트 시 실행
    console.log('컴포넌트가 마운트되었습니다');

    return () => {
      // 언마운트 시 실행
      console.log('컴포넌트가 언마운트됩니다');
    };
  }, []); // 빈 배열: 마운트/언마운트 시에만 실행

  useEffect(() => {
    // 특정 값이 변경될 때마다 실행
    console.log('값이 변경되었습니다');
  }, [someValue]); // someValue가 변경될 때마다 실행
}