immer에 대해 알아보자
immer의 특징은 object를 복사해서 사용 할때 데이터를 수정하거나 추가 삭제 한 부분을 제외 한 나머지는 구조적으로 공유 하고 있고 변환 된 부분만 새로운 object로 반영된다.
version1은 우리가 일반적으로 사용하는 방식이고 version2는 immer의 produce를 이용 하여 mutable 하게 작성 하였다.
그리고 version3는 첫번째 파라미터에 func을 전달 함으로써 version2보다 효과적으로 작성가능하다.
const userData = [
{
id: 1,
name: sizplay,
job: frontend
},
{
id: 2,
name: Alex,
job: backend
}
]
const [users, setUsers] = useState(userData);
addUser = (e) => {
e.preventDefault();
const newUser = {
id: 3,
name: Chris,
job: fullstack
}
// version1
setUsers([
...users,
newUser
]);
// version2
setUsers(produce(users, draft => {
users.push(newUser);
});
// version3
setUsers(produce(draft => {
users.push(newUser);
}));
}