1. 문제 파악

단일 상태로 관리중인 값을 다중 객체로 관리할 필요가 생겼다. 필요한 상태가 더 있다면 단일 상태를 추가하면 그만이지만, 이번 케이스는 기존 서비스의 변경을 최소화 하고 유지보수성을 향상 시키기 위해 적용하였다.

예를 들면 이런 방식이다.

const [food, setFood] = useState('미역국')

console.log('오늘의 음식은 ${food} 입니다.')

// 출력 : 오늘의 음식은 미역국 입니다.

이렇게 음식에 대한 상태를 사용 중이라고 생각 해보자. 그런데, 국인지 밥인지에 따라 서비스에서 다르게 사용할 일이 생겼다.

2. 해결방안 탐색

간단한 해결 방법으로는

const [food, setFood] = useState('미역국')
const [foodType, setFoodType] = useState('국')

console.log('오늘의 음식(${foodType})은 ${food} 입니다.')
// 출력 : 오늘의 음식(국)은 미역국 입니다.

이렇게 구현하고 마는 쉬운 방법도 있겠지만, 데이터의 내용을 보면 foodType이 다양하게 관리될 가능성이 높아 보일 뿐 아니라, 이런식으로 계속 값이 증가하게 되면 관리의 어려움이 생기게 된다.

(물론 내가 사용한 프로젝트가 음식관련은 아니다.. 포스팅을 위해 비슷한 예시로 변환하였다.)

3. 해결방안 적용

3-1. 적용한 방법

따라서 아래와 같은 방법으로 개선하였다.

const [food, setFood] = useState({
  name: '미역국',
  foodType: '국',
})

console.log('오늘의 음식(${food.foodType})은 ${food.name} 입니다.')

이렇게 되면 상태 하나로 관리가 용이해질 수 있다.

3-2. 상태 업데이트 방법

영향을 받은 코드를 대략적으로 예시를 남기면 아래와 같다. 보통 React에서 대부분 사용하는 onChange 나 handler 함수들에 적용된다.

// 기존
const handleChange = value => {
  if (value) {
    setData(value)
  }
}

// 변경
const handleChange = value => {
  if (value) {
    setData(prevState => ({
      ...prevState,
      data: value,
    }))
  }
}

참고로 ...prevState는 전개 연산자로, 여기서는 상태 업데이트 시 기존의 다른 상태들은 유지하고, 새로운 값을 갱신할 때 사용한다.

4. 결론

리액트를 사용중인 엔지니어라면 대부분 잘 사용하는 부분이겠지만, 초심자를 위해 별도로 포스팅 하였다. 누군가는 도움이 되길 바라며 글을 마친다.