useState에 대해서

useState 훅은 컴포넌트 안에서 상태(state)를 관리할 수 있게 해주는 훅

상태란 컴포넌트의 현재 데이터나 값을 저장하고 추적하는 것

 

useState를 사용하면 두 가지 값을 반환해요:

1. 상태 값 (current state): 현재 상태의 값을 가져옵니다.

2. 상태 업데이트 함수(set function): 상태를 새 값으로 업데이터하는 함수입니다.

 

import { useState } from 'react';

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

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

 

1. useState(0)은 상태의 초기값을 0으로 설정합니다.

2. count는 현재 상태 값을 의미합니다.

3. setCount는 count를 새 값으로 업데이트하는 함수입니다.

4. 버튼을 클릭하면 setCount(count + 1)이 실행되며 count가 1씩 증가합니다.

 

1. 초기값(initial state) 설정

useState의 첫 번째 인자는 초기값을 지정합니다. 숫자뿐만 아니라 문자열, 객체, 배열도 초기값으로 사용할 수 있습니다.

const [name, setName] = useState('초기 이름'); // 초기값으로 문자열 사용

 

2. 상태 업데이트는 비동기적

setState 함수는 비동기적으로 동작하므로 상태가 즉시 업데이트되지 않고 렌더링 사이클이 끝난 후에 반영됩니다.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // 이전 값이 출력됩니다.
  }

  return <button onClick={handleClick}>클릭</button>;
}

 

3. 상태 병합 불가

useState는 이전 상태와 새 상태를 자동으로 병합하지 않습니다.

만약 객체를 관리하는 상태에서 일부 속성만 업데이트하고 싶다면 반드시 나머지 속성을 복사해줘야 합니다.

const [user, setUser] = useState({ name: 'Alice', age: 25 });

setUser({ ...user, age: 26 }); // 기존 상태를 복사하고 age만 업데이트

 

 

4. Lazy Initialization

초기값 계산 비용이 비싸다면, 초기값을 함수로 지정해서 useState가 한 번 계산하도록 만들 수 있습니다.

const [expensiveValue, setExpensiveValue] = useState(() => {
  return complexComputation(); // 초기값 계산 로직
});

 

1. setState로 상태  직접 변경 금지

상태를 업데이트할 때 상태 값을 직접 수정하지 마세요.

const [items, setItems] = useState([]);
items.push('새 아이템'); // ❌ 직접 수정 (안됨)
setItems([...items, '새 아이템']); // ✅ 새로운 배열 반환

 

2. 초기값이 고정되지 않음

useState의 초기값은 최초 호출 시에만 사용됩니다. 이후 setState를 호출한다고 초기값으로 돌아가지는 않습니다.

useState는 컴포넌트가 기억해야 할 관리하고 이 데이터를 기반으로 UI를 업데이트할 수 있도록 하는 기본 도구입니다.