여러개의 state를 업데이트하는 방법

리액트는 useState를 사용해서 state가 변경될 때 마다 컴포넌트를 리렌더링해서 컴포넌트의 상태 값을 변화시킨다.
리액트의 state는 개별적으로 관리되며 다른 state에 영향을 미치지 않는다.
한 컴포넌트에 여러개의 state가 있을 경우 이를 업데이트하는 다양한 방법이 존재한다.

여러개의 useState조각으로 업데이트

import { useState } from 'react'

const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');

const titleChangeHandler = (e) => {
  setTitle(e.target.value);
}
const amountChangeHandler = (e) => {
  setAmount(e.target.value);
}
const dateChangeHandler = (e) => {
  setDate(e.target.value);
}

useState를 필요한 만큼 사용하는 방법이다.
여러개의 useState조각들을 가지고 있으며 이 조각들은 완전히 별개의 것으로 취급된다.
완전히 독립된 방법으로 작동하며 각 각의 독립된 useState조각은 다른 조각에 영향을 주지 않는다.
참고로 숫자도 결국 문자열로 초기화되기 때문에 state의 초깃값을 빈문자열 ''로 설정한다.

한개의 useState조각으로 업데이트

import { useState } from 'react'

const [input, setInput] = useState({
  title: '',
  amount: '',
  date: '',
})

const titleChangeHandler = (e) => {
  setInput({
    ...input,
    title: e.target.value,
  });
}
const amountChangeHandler = (e) => {
  setInput({
    ...input,
    amount: e.target.value,
  });
}
const dateChangeHandler = (e) => {
  setInput({
    ...input,
    date: e.target.value,
  });
}

useState를 한 개만 사용하는 방법이다.
state가 변화하면 state는 이 전의 값과 병합하는 것이 아닌 새로운 state로 변환시켜 버린다.
그러므로 spread문법을 이용해 이 전의 state의 키와 밸류를 잃어버리지 않도록 해야한다.

더 나은 방법

import { useState } from 'react'

const [input, setInput] = useState({
  title: '',
  amount: '',
  date: '',
})

const titleChangeHandler = (e) => {
  setInput((prevState) => {
    return { ...prevState, title: e.target.value }
  });
}
const amountChangeHandler = (e) => {
  setInput((prevState) => {
    return { ...prevState, amount: e.target.value }
  });
}
const dateChangeHandler = (e) => {
  setInput((prevState) => {
    return { ...prevState, date: e.target.value }
  });
}

이 전의 방법은 바로 이전의 상태 스냅샷이 아닌 오래된 상태 스냅샷에 의존할 수도 있다.
위의 방법을 쓰게 되면 setInput안에 있는 함수의 prevState가 가장 최신 상태의 스냅샷이라는 것을 리액트가 보장한다.
그러므로 객체로 상태를 업데이트를 할 땐 위의 가장 안전한 방법으로 업데이트하는 것이 좋다.
위와 같이 이전 상태에 의존하는 코드를 작성할 땐 위와 같은 함수폼을 사용해야한다.

배열 state의 추가(add), 제거(delete) 작업의 경우에도 위와 같이 setState의 매개변수로 화살표 함수를 넣는 방법을 사용한다.
위의 코드는 강의에 나왔던 예시이다.

추가) state 끌어올리기

state 끌어올리기 섹션을 보던 중 다음과 같은 방법으로 함수의 인자를 이용해 데이터를 끌어올리는 것을 확인하였다.
기존에 사용했던 나의 방법은 setState를 내려서 직접 하위 컴포넌트에서 state를 업데이트 시켜주는 방식을 사용하였으나 강의에서는 함수의 인자에 데이터를 넣어주는 방법을 사용하였다.
위와 같이 useState를 사용한 상태관리 컴포넌트를 하나만 만들어 주고 나머지 컴포넌트는 프레젠테이셔널 컴포넌트로 만드는 방식을 사용하는 방법(setState를 내리지 않고 함수의 인자로 state를 받아오는 방법)이 좋을 것 같다.

또한 state를 관리하는 컴포넌트 (여기선 App)에선 기존의 state값을 사용할 땐 setState의 매개변수를 함수로 처리하는 방법을 사용하는 것이 좋다.