React useState 기능

 

 

 

React의 useState는 함수형 컴포넌트에서 상태 관리를 가능하게 하는 훅(Hook)입니다. 컴포넌트가 재렌더링되더라도 상태를 유지하고 상태 변경 시 UI를 업데이트할 수 있도록 돕습니다.

 

 

기본 사용법

import React, { useState } from 'react';

function Counter() {
  // state 변수와 setter 함수 선언
  const [count, setCount] = useState(0);

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

export default Counter;

 

 

주요 특징

 

1. 초기값 설정: useState의 인자로 초기값을 전달합니다. 초기값은 숫자, 문자열, 배열, 객체 등 다양한 타입이 가능합니다.

const [name, setName] = useState("홍길동");
const [items, setItems] = useState([]);

 

2. 상태 변경: 상태를 업데이트하려면 setter 함수(setState)를 호출합니다. 상태가 업데이트되면 컴포넌트가 재렌더링됩니다.

3. 함수형 업데이트: 이전 상태를 기반으로 새로운 상태를 계산해야 할 경우 상태 업데이트 함수에 함수를 전달할 수 있습니다.

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

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

 

4. 객체 상태 관리: 객체를 상태로 사용할 때 기존 상태를 유지하면서 특정 필드만 업데이트하려면 스프레드 연산자(...)를 사용합니다.

const [user, setUser] = useState({ name: "홍길동", age: 25 });

const updateName = () => {
  setUser(prevUser => ({ ...prevUser, name: "이순신" }));
};

 

5. 배열 상태 관리: 배열에 요소를 추가하거나 제거할 때도 setState를 활용합니다.

const [tasks, setTasks] = useState([]);

const addTask = (task) => {
  setTasks(prevTasks => [...prevTasks, task]);
};

const removeTask = (index) => {
  setTasks(prevTasks => prevTasks.filter((_, i) => i !== index));
};

 

 

주의점

• useState를 호출하는 순서는 컴포넌트가 렌더링될 때 유지되어야 합니다.
• 상태 업데이트는 비동기적으로 처리될 수 있습니다. 즉, 상태 변경 후 바로 상태를 읽으려고 하면 예상과 다른 결과가 나올 수 있습니다.

useState는 React에서 가장 기본적이면서도 강력한 상태 관리 도구입니다. 컴포넌트의 상태를 간단히 관리하고 싶을 때 매우 유용합니다.

 

 

 

 

 

 

 

 

#프로그램공부 #React #useState #상태관리도구 #컴포넌트 #훅 #Hook