Next.js | Json in Json 상태 관리

React에서 상태 관리를 하다 보면 JSON 안에 JSON이 있는 형태의 Object가 있을 수 있고, 

JSON 안에 JSON 데이터를 setState로 해당 요소만 변경하려고 할 때가 있다.

 

상태 관리 방법이 매우 다양하지만 ( useReducer를 컴포넌트 안에 쓸 경우 나 리덕스 미들웨어를 쓰는 등 )

나 같은 경우에는 먼저 컴포넌트 함수 안에 상태를 useState만 써서 몰아서 다 채워 넣고 나중에 중복 사용이 많아지면

그때 미들웨어로 정리하고 싶었기 때문에 이런 상황이 생겼고, 물론 아는 사람은 있을테지만 아무리 구글링을 해봐도 도대체 방법이 나오질 않아서 찾아내게 되었다.

 

예를 들어,

const [state,setState] = useState(animal);

const animal = {
      cat : {
          name: "",
          age: 0
      },
      dog : {
          name: "",
          age: 0
      }
};

 

이런 식의 데이터가 있을 때 cat의 name만 바꾸고자 할 경우에 이런 방법을 쓸 수 있다.

 

setState({...state,['cat'] : {...state.cat, ['name'] : "초코"} })

 

별거 아닌거 같은데 이상하게 검색해도 내용이 안나오는게 은근히 많다..