React <form> useState()

 

개요

function ReviewForm() {
  const [values, setValues] = useState({
    title: "",
    rating: 0,
    content: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  return (
    <form className='ReviewForm' onSubmit={handleSubmit}>
      <input name='title' value={values.title} onChange={handleChange}></input>
      <input
        type='number'
        name='rating'
        value={values.rating}
        onChange={handleChange}
      ></input>
      <textarea
        name='content'
        value={values.content}
        onChange={handleChange}
      ></textarea>
      <button type='submit'>확인</button>
    </form>
  );
}

 

<form>의 입력값을 하나의 state로 묶어서 관리한다.

  const [values, setValues] = useState({
    title: "",
    rating: 0,
    content: "",
  });

 

handleChange() 이건 어떻게 동작 하는거지?

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

 

setValues((prevValues) => ({ ...prevValues, [name]: value })) 설명

이 부분은 React의 상태(state) 업데이트 함수인 setValues를 사용하여 기존 상태를 유지하면서 특정 입력 필드의 값만 변경하는 코드입니다.

 

1. setValues

• useState 훅을 사용하여 선언된 상태 변경 함수입니다.
• values는 현재 폼의 입력값을 저장하는 상태 객체입니다.
• setValues를 호출하면 values 상태가 업데이트됩니다.

2. 상태 업데이트 방식

(prevValues) => ({
  ...prevValues,
  [name]: value,
})

 

• prevValues: 기존 상태 값 (이전 values 객체)
• ...prevValues: 기존 values 객체의 모든 속성을 복사 (spread 연산자 사용)
• [name]: value: 현재 입력 필드의 name 속성에 해당하는 값을 새로운 value로 설정

 

즉, 기존의 상태 객체를 복사한 후, 현재 입력된 값만 변경하여 새로운 객체를 만든다는 의미입니다.

 

3. 실행 흐름 예시

입력 필드에서 title, rating, content를 입력한다고 가정해 보겠습니다.

1. 사용자가 title 입력 필드에 "리뷰 제목"을 입력하면

setValues((prevValues) => ({
  ...prevValues,
  title: "리뷰 제목",
}));

기존 values 객체는 유지하면서 title 속성만 "리뷰 제목"으로 변경됩니다.

 

2. 이후 rating을 5로 입력하면

setValues((prevValues) => ({
  ...prevValues,
  rating: 5,
}));

 

3. 최종적으로 values 상태는 아래와 같은 형태가 됩니다.

{
  "title": "리뷰 제목",
  "rating": 5,
  "content": ""
}

이후 content도 입력하면 해당 값도 업데이트됩니다.

 

 

useState() 개요

useState()는 React에서 함수형 컴포넌트에서 상태(state)를 관리할 수 있도록 해주는 React Hook입니다.

 

1. 기본 사용법

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>
  );
}

 

• useState(초기값) : 상태 변수와 해당 상태를 변경하는 함수를 반환합니다.
• count : 상태 값
• setCount : 상태를 업데이트하는 함수

2. useState의 동작 방식

• 상태가 변경되면 컴포넌트가 다시 렌더링됨
• 비동기적으로 작동할 수 있음 (React 내부에서 여러 개의 상태 업데이트를 배치 처리 가능)
• 초기값을 함수로 설정 가능 → 성능 최적화 가능

useState

 

3. useState에서 이전 상태를 기반으로 업데이트하기

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

setCount(prevCount => prevCount + 1); // 안전하게 이전 값 기반으로 업데이트

 

4. useState로 객체 상태 관리

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

setUser(prev => ({ ...prev, age: prev.age + 1 })); // 기존 값 유지 + age 변경

객체를 업데이트할 때는 반드시 기존 상태를 복사 후 변경해야 합니다.

 

5. useState vs useReducer

 

• 상태가 복잡하면 useReducer()가 더 적합할 수 있음.
• 간단한 상태 변경 → useState()
• 복잡한 상태 로직 → useReducer()

 

 

 

결론 및 요약

3. useState에서 이전 상태를 기반으로 업데이트하기

4. useState로 객체 상태 관리

 

이 두 부분을 이해가 선행 되어야 한다.

 

Key Insights

prevValues 이거 예약어야?

아니요, prevValues는 예약어가 아닙니다.
✅prevValues란?
  - prevValues는 그냥 함수의 매개변수(parameter)일 뿐입니다.
  - setValues 함수에 전달되는 콜백 함수의 첫 번째 인자는 항상 이전 상태 값(prev state)을 받습니다.
  - 변수명은 자유롭게 변경할 수 있으며, previousState, oldValues 등으로 바꿔도 됩니다.