React – 상태 관리와 Hooks – 기본 Hooks – 0 – useState 사용 예시와 제약

작성자 wooah
React – 상태 관리와 Hooks – 기본 Hooks – 0 – useState 사용 예시와 제약

React – 상태 관리와 Hooks – 기본 Hooks – 0 – useState 사용 예시와 제약

안녕하세요! 😄
오늘은 리액트 훅(Hooks)의 꽃이라고 할 수 있는 **useState**에 대해 깊이 있게 알아보려고 해요.
useState는 상태 관리를 위한 가장 기본적인 훅으로, 동적인 UI를 만들기 위한 출발점이라고 보셔도 좋아요.

자, 그럼 useState의 개념부터 다양한 활용 예시, 그리고 자주 발생하는 실수까지 차근차근 알아볼까요?

1. useState란 무엇인가요?

React에서 함수형 컴포넌트는 원래 “상태”를 가질 수 없었어요.
하지만 useState 훅이 등장하면서, 함수형 컴포넌트도 상태를 사용할 수 있게 되었답니다!

🧠 비유하자면?

useState는 메모장 같은 역할이에요.
컴포넌트 안에서 어떤 값을 기억하고, 그 값을 바꾸면 화면(UI)을 자동으로 다시 그려주는 기능을 하죠!

2. 기본 사용법

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 정의

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

설명:

  • count: 상태 변수
  • setCount: 상태를 변경하는 함수
  • useState(0): 초기값은 0

👉 버튼을 클릭하면 setCount가 호출되고, 컴포넌트는 다시 렌더링됩니다.

3. 다양한 타입의 상태 관리

useState는 숫자뿐만 아니라 문자열, 배열, 객체 등 어떤 타입도 가능해요!

문자열 상태 예시

const [name, setName] = useState('');

배열 상태 예시

const [items, setItems] = useState([]);

객체 상태 예시

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

➡️ 다양한 데이터 타입을 상태로 관리할 수 있어요. 단, 불변성 유지에 주의해야 합니다!

4. 상태 변경 함수의 특징

setState 함수는 상태를 직접 바꾸는 게 아니라,
새로운 값으로 교체한 후 컴포넌트를 리렌더링해줍니다.

✅ 함수형 업데이트

setCount(prev => prev + 1);

prev는 이전 상태값이에요.
여러 개의 상태 변경 요청이 있을 때, 이 방법이 더 안전합니다!

5. 상태 업데이트 시 주의사항 (불변성)

React는 기존 상태를 수정하는 것이 아니라 새 상태를 만들어야 합니다.

❌ 잘못된 예 (객체 수정)

user.name = '철수';
setUser(user); // ❌ 작동은 해도 리렌더링이 안 될 수 있어요

✅ 올바른 예 (새 객체 만들기)

setUser({ ...user, name: '철수' });

➡️ 이렇게 spread 문법(…)을 사용해서 새로운 객체나 배열을 만들어야 React가 상태 변경을 감지하고 렌더링을 다시 해줘요!

6. 여러 상태 변수 관리

React에서는 하나의 컴포넌트에 여러 개의 useState를 사용할 수 있어요.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

또는 객체 하나에 모두 담아도 되지만, 상태가 독립적이라면 분리하는 것이 관리하기 더 쉬워요.

7. 초기값 설정 시 함수로 전달하기

const [expensiveValue, setExpensiveValue] = useState(() => {
  console.log("한 번만 실행됩니다!");
  return 계산결과;
});
  • 초기값 계산 비용이 클 경우, 함수를 전달하면 컴포넌트가 처음 렌더링될 때만 실행돼요.

8. useState에서 자주 발생하는 실수

실수 설명 해결 방법
상태 직접 수정 기존 상태를 변경하고 setState 하지 않음 항상 새 값으로 대체하기
비동기 업데이트 오해 setState 후 바로 변경된 값을 기대함 useEffect나 함수형 업데이트 사용
상태 초기값을 잘못 설정 객체/배열을 잘못 초기화함 [], {} 등 올바른 형식으로 초기화
여러 setState 연속 호출 마지막 하나만 반영될 수도 있음 함수형 업데이트 사용 권장

9. 실전 예시: To-Do 리스트

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}
  • 배열 상태 관리
  • 불변성을 지키며 새로운 항목 추가
  • 입력창 초기화까지!

10. 주의사항 정리

항목 설명
상태는 직접 수정 금지 항상 set함수를 통해 변경해야 함
비동기적으로 처리됨 setState 후 값 확인하려면 useEffect 사용
상태는 렌더링을 유발 값이 바뀌면 컴포넌트가 다시 그려짐
초기값 중요 데이터 타입에 맞게 설정
객체/배열은 복사해서 변경 spread 또는 map 등으로 새로 만들어야 함

마무리하며

React의 useState는 아주 작지만 엄청난 힘을 가진 훅이에요.
UI를 동적으로 만들고 사용자 상호작용을 처리하기 위해 꼭 필요한 친구랍니다.

✅ 핵심 요약

  • 상태는 컴포넌트 내에서 값을 기억하게 해줍니다.
  • 상태는 변경되면 자동으로 렌더링이 다시 일어납니다.
  • 항상 불변성을 유지하면서 값을 갱신해야 React가 잘 작동해요!

다음 시간에는 또 하나의 인기 훅인 useEffect를 통해 사이드 이펙트 처리 방법을 알아보겠습니다!
React의 진짜 매력은 이제부터 시작이에요! 🚀

답글 남기기