[React] UseState란?

리액트 useState란?

useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줍니다.
상태란 시간이 지남에 따라 변경될 수 있는 값으로, 예를 들어 버튼 클릭 횟수, 입력 값, 토글 상태 등이 모두 상태에 해당합니다.
useState를 사용하면 컴포넌트가 기억해야 하는 값을 저장하고, 그 값이 바뀔 때마다 컴포넌트가 다시 렌더링됩니다.

---

useState 사용법

기본 문법

const [상태변수, 상태변경함수] = useState(초기값);

• 상태변수: 현재 상태 값을 저장합니다.
• 상태변경함수: 상태를 변경할 때 사용하는 함수입니다.
• 초기값: 상태의 초기값을 설정합니다.

 

예시: 카운터 컴포넌트

import React, { useState } from 'react';

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

  const addCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={addCount}>Add</button>
    </div>
  );
}

• count는 현재 카운트 값을 저장하는 상태 변수입니다.
• setCount는 count 값을 변경할 때 사용하는 함수입니다.
• 버튼을 클릭하면 addCount 함수가 실행되고, setCount를 통해 count 값이 1 증가합니다.
• count 값이 바뀌면 컴포넌트가 자동으로 리렌더링되어 새로운 값이 화면에 표시됩니다.

 

상태를 업데이트하는 두 가지 방법

1. 값 직접 업데이트
   

   const addCount = () => {
     setCount(1);
   };

   count 값을 1로 직접 설정합니다.
2. 함수형 업데이트
   

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

   이전 상태 값을 기반으로 새로운 상태를 계산할 때 사용합니다. 여러 번 연속해서 상태를 변경할 때, 또는 최신 상태 값을 안전하게 사용하고 싶을 때 권장됩니다.

 

여러 상태를 객체로 관리하기

여러 개의 입력 필드나 관련된 데이터를 하나의 객체로 묶어서 관리할 수도 있습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });

  const { username, message } = form;

  const onChange = e => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        placeholder="유저명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="메시지"
        value={message}
        onChange={onChange}
      />
    </div>
  );
};

• 여러 입력 값을 하나의 상태 객체(form)로 관리할 수 있습니다.
• onChange 핸들러에서 setForm을 통해 각 필드의 값을 업데이트합니다.

---

정리

• useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 훅입니다.
• 상태가 변경될 때마다 컴포넌트가 자동으로 리렌더링됩니다.
• 상태 변경 함수는 비동기적으로 동작하므로, 연속해서 상태를 변경할 때는 함수형 업데이트 방식을 사용하는 것이 안전합니다.
• 여러 상태를 객체로 묶어 관리하면 코드가 더 깔끔해지고 유지보수가 쉬워집니다.

useState를 잘 활용하면 리액트 컴포넌트의 동적인 UI와 데이터를 효과적으로 관리할 수 있습니다.