[React] useImmer로 state 업데이트 하기

기존의 state 객체 업데이트

state 객체를 업데이트 할 때, 중첩된 객체일 경우 얕은 복사가 되기 때문에 전개 연산자를 사용해 객체를 복사 한 후 업데이트를 해야한다.

예를 들면 기존 객체가 이런식이라고 치면

const initialState={
	name:'yoon',
	information:{
        age:24,
        university:'hangook',
        major:'economy'
	}
	
}

기존에서 major의 값을 업데이트 하려고 할 때

setState({
	...obj,
    information:{
    	...obj.information,
        major:'computer-engineering'}
})

이런식으로 처리를 해야한다.

useImmer를 사용하면 중첩된 객체의 값을 직접 변경할 수 있는 것 처럼 보이기 때문에 편리하다. 

 

 

useImmer 사용하기

npm install immer use-immer

먼저 use-Immer를 임포트 한 후

import {useImmer} from 'use-immer';

 

useState를 사용할 때 처럼 그 위치에 useImmer를 사용하면 된다.

import {useImmer} from 'use-immer'
const App=()=>{
const [info,setInfo]= useImmer(initialState)

	return (<div>
		    <div>{info.name}</div>
		    <div>{info.information.age}</div>
		</div>)
}

객체를 업데이트 하고 싶을 때 useState처럼 하되, 아래와 같이 하면 된다

setInfo(draft=>{
    draft.information.major='computor-engineering'
    draft.name='eun'
    
})

안에 콜백함수를 사용하여 info.information.major 값을 직접 변경한다.

실제로 직접 변경하는 것 처럼 보이지만,  새로운 객체를 생성한다고 한다.

 

 

 

---

참고자료

https://www.npmjs.com/package/use-immer

use-immer

https://react.dev/learn/updating-objects-in-state#write-concise-update-logic-with-immer

Updating Objects in State – React