icon안동민 개발노트

state와 useState 훅 기초

 React에서 state는 컴포넌트의 내부 데이터를 관리하는 핵심 개념입니다.

 useState 훅은 함수형 컴포넌트에서 state를 사용할 수 있게 해주는 React의 내장 함수입니다.

 이 절에서는 state의 개념, useState 훅의 사용법, 그리고 상태 관리의 중요성에 대해 알아보겠습니다.

state의 개념과 중요성

 state는 컴포넌트의 "기억"이라고 할 수 있습니다.

 사용자 입력, 서버로부터의 데이터, 또는 시간의 경과에 따라 변경되는 값들을 저장하는 데 사용됩니다.

 state의 주요 특징

  1. 변경 가능성 : state는 변경 가능하며, 변경 시 컴포넌트의 리렌더링을 트리거합니다.
  2. 컴포넌트 특정 : 각 컴포넌트는 자신만의 state를 가질 수 있습니다.
  3. 비공개성 : state는 해당 컴포넌트 내부에서만 직접 접근 및 수정이 가능합니다.

 상태 관리는 다음과 같은 이유로 중요합니다.

  • 동적 UI 구현 : 사용자 상호작용에 반응하는 인터페이스를 만들 수 있습니다.
  • 데이터 일관성 유지 : 애플리케이션의 데이터 상태를 일관되게 관리할 수 있습니다.
  • 성능 최적화 : 필요한 부분만 업데이트하여 효율적인 렌더링이 가능합니다.

state와 props의 차이

 state와 props는 모두 컴포넌트의 데이터를 다루지만, 몇 가지 중요한 차이가 있습니다.

  1. 소유권 : state는 컴포넌트 내부에서 관리되지만, props는 부모 컴포넌트에서 전달받습니다.
  2. 변경 가능성 : state는 컴포넌트 내에서 변경 가능하지만, props는 읽기 전용입니다.
  3. 용도 : state는 컴포넌트의 내부 데이터를 관리하는 데 사용되고, props는 컴포넌트 간 데이터 전달에 사용됩니다.

useState 훅 사용하기

 useState 훅은 함수형 컴포넌트에서 state를 사용할 수 있게 해줍니다.

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 이 예제에서

  • useState(0)는 초기값이 0인 state를 생성합니다.
  • count는 현재 상태값입니다.
  • setCount는 상태를 업데이트하는 함수입니다.

useState의 특징과 주의사항

  1. 다중 상태 관리 : 하나의 컴포넌트에서 여러 개의 useState를 사용할 수 있습니다.
다중 상태 관리 예제
function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
 
  // ...
}
  1. 객체 상태 관리 : 객체 형태의 상태를 관리할 때는 전체 객체를 새로 설정해야 합니다.
객체 상태 관리 예제
const [user, setUser] = useState({ name: '', age: 0 });
 
// 잘못된 방법
setUser({ name: 'John' }); // 이렇게 하면 age 속성이 사라집니다
 
// 올바른 방법
setUser(prevUser => ({ ...prevUser, name: 'John' }));
  1. 함수형 업데이트 : 이전 상태를 기반으로 업데이트할 때는 함수를 전달하는 것이 안전합니다.
함수형 업데이트 예제
setCount(prevCount => prevCount + 1);

상태 업데이트의 비동기적 특성

 React에서 상태 업데이트는 비동기적으로 처리됩니다.

 이는 성능 최적화를 위한 것이지만, 때로는 예상치 못한 결과를 초래할 수 있습니다.

function Counter() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 이 값은 업데이트되지 않은 이전 값입니다
  };
 
  return (
    <button onClick={handleClick}>
      Click me ({count})
    </button>
  );
}

 이 경우, console.log는 업데이트된 값이 아닌 이전 값을 출력합니다. 최신 상태값이 필요한 경우, useEffect 훅을 사용하거나 상태 업데이트 함수에 콜백을 전달할 수 있습니다.

예제 : 간단한 Todo 리스트

 다음은 useState를 사용한 간단한 Todo 리스트 컴포넌트입니다.

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
 
  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput('');
    }
  };
 
  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

 이 예제에서는 두 개의 state(todos와 input)를 사용하여 Todo 리스트와 입력 필드의 상태를 관리합니다.

 사용자가 새로운 Todo를 추가할 때마다 todos 배열이 업데이트되고, 컴포넌트가 리렌더링되어 새로운 목록을 표시합니다.

 useState 훅은 React 함수형 컴포넌트에서 상태를 관리하는 강력하고 유연한 방법을 제공합니다.

 이를 통해 개발자는 복잡한 클래스 컴포넌트 문법 없이도 동적이고 반응적인 UI를 쉽게 만들 수 있습니다.

 상태의 불변성을 유지하고, 비동기적 업데이트의 특성을 이해하며, 적절한 시점에 상태를 업데이트하는 것이 중요합니다.

 이러한 원칙을 따르면, 예측 가능하고 효율적인 React 애플리케이션을 개발할 수 있습니다.

이전으로다음으로