Front-End
immer 불변성 유지하기 본문
불변성을 유지하면서 상태를 업데이트하는 것은 중요한 것을 배웠습니다.
전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고
새로운 값을 덮어 쓸 수 있다.
하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것은 매우 힘들다.
값 하나를 업데이트 하기 위해 코드 열 줄 정도 작성해야 하는데,
이렇게 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서다.
immer 이라는 라이브러리를 사용하면,
구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할 수 있다.
1. immer 사용법 알아보기
먼저 immer을 설치하자.
$yarn add immer
immer 사용법
import produce from 'immer';
const nextState = produce(originalState, draft => {
// 바꾸고 싶은 값 바꾸기
draft.somewhere.deep.inside = 5;
})produce라는 함수는 두 가지 파라미터를 받습니다.
첫 번째 파라미터는 수정하고 싶은 상태,
두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수다.
두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면,
produce 함수가 불변성 유지를 대상 해주면서 새로운 상태를 생성해준다.
이 라이브러리의 핵심은
'불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해주는 것'
단순히 깊은 곳에 위치하는 값을 바꾸는 것 외에 배열을 처리할 때도 매우 쉽고 편하다.
import produce from 'immer';
const originalState = [
{
id : 1,
todo : '전개 연산자와 배열 내장 함수로 불변성 유지하기',
checked : true,
},
{
id : 2,
todo : 'immer로 불변성 유지하기.',
checked : false,
}
];
const nextState = produce(originalState, draft => {
// id 가 2인 항목의 checked 값을 true로 성정
const todo = draft.find(t=> t.id === 2); // id로 항목 찾기
todo.checked = true;
// 혹은 draft[1].checked = true;
// 배열에 새로운 데이터 추가
draft.push({
id : 3,
todo : '일정 관리 앱에 immer 적용하기'.
checked : false,
});
// id = 1 인 항목을 제거
draft.splice(draft.findIndex(t => t.id === 1), 1);
});
App 컴포넌트의 차이를 보자.
일단 immer를 사용하지 않고 불변성을 지킨 컴포넌트를 보자.
// App.js
import { useRef, useCallback, useState } from 'react';
const App = () => {
const nextId = useRef(1);
const [form, setForm] = useState({ name : '', usernamer : '' });
const [data, setData] = useState({
array : [],
uselessValue : null
});
// input 수정을 위한 함수
const onChange = useCallback(
e => {
const { name, value } = e.target;
setForm({
...form,
[name] : [value]
});
},
[form]
);
// form 등록을 위한 함수
const onSubmit = useCallback(
e => {
e.preventDefault();
const info = {
id : nextId.current,
name : form.name,
username : form.username
};
// array에 새 항목 등록
setData({
...data,
array : data.array.concat(info)
});
// form 초기화
setForm({
name : '',
username : ''
});
nextId.current += 1;
},
[data, form.name, form.username]
);
// 항목을 삭제하는 함수
const onRemove = useCallback(
id => {
setData({
...data,
array : data.array.filter(info => info.id !== id)
});
},
[data]
);
return (
<div>
<form onSubmit={onSubmit}>
<input
name = "username"
placeholder = "아이디"
value = {form.username}
onChange = {onChange}
/>
<input
name = "name"
placeholder = "이름"
value = {form.name}
onChange = {onChange}
/>
<button type = "submit"> 등록 </button>
</form>
<div>
<ul>
{data.array.map(info => (
<li key = {info.id} onClick = {() => onRemove(info.id)}>
{info.username}({info.name})
</li>
))}
</ul>
</div>
</div>
);
};
export default App;자, immer 을 적용해서 다른점을 봐봅시다.
// App.js (immer 적용 버전)
import { useRef, useCallback, useState } from 'react';
const App = () => {
const nextId = useRef(1);
const [form,setForm] = useState({ name :'', username : '' });
const [data, setData] = useState({
array : [],
uselessValue : null
});
// input 수정을 위한 함수
const onChange = useCallback(
e => {
const { name, value } = e.target;
setForm(
produce(form, draft => {
draft[name] = value;
})
);
},
[form]
);
// form 등록을 위한 함수
const onSubmit = useCallback(
e => {
e.preventDefault();
const info = {
id : nextId.current,
name : form.name,
username : form.username
};
// array에 새 항목 등록
setData(
produce(data, draft => {
draft.array.push(info);
})
);
// form 초기화
setForm({
name : '',
username : ''
});
nextId.current += 1;
},
[data, form.name, form.username]
);
// 항목을 삭제하는 함수
const onRemove = useCallback(
id => {
setData(
produce(data, draft => {
draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
})
);
},
[data]
);
return (...);
};
export default App;차이첨이 보이나요 ?! 깰끔한 너낌
immer를 사용하여 컴포넌트 상태를 작성할 때는 객체 안에 있는 값을 직접 수정하거나,
배열에 직접적인 변화를 일으키는 push, splice 등의 함수를 사용해도 무방하다.
그렇기 때문에 불변성을 유지에 익숙하지 않아도 자바스크립트에 익숙하다면
컴포넌트 상태에 원하는 변화를 쉽게 반영 시킬 수 있다.
immer를 사용한다고 해서 무조건 코드가 간결해지지는 않다.
onRemove의 경우에는 배열 내장 함수 filter를 사용하는 것이 코드가 더 깔끔하므로,
굳이 immer를 적용할 필요가 없습니다.
immer는 불변성을 유지하는 코드가 복잡할 때만 사용해도 충분합니다.
useState의 함수형 업데이트와 immer를 함께 쓸 수 있다.
const [number, setNumber] = useState(0);
// prevNumbers는 현재 number 값을 가리킨다.
const onIncrease = useCallback(
() => setNumber(preNumber => preNumber + 1),
[],
);
immer에서 제공하는 produce 함수를 호출할 때,
첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환한다.
const updata = produce(draft => {
draft.value = 2;
});
const originalState = {
value : 1,
foo : 'bar',
};
const nextState = update(originalState);
console.log(nextState); // { value : 2, foo : 'bar' }이러한 immer의 속성과 useState의 함수형 업데이트를 함께 활용하면 코드를 더욱 깔끔하게 만들 수 있다.
이 라이브러리는 컴포넌트의 상태 업데이트가 조금 까다로울 때 사용하면 좋다.
만약 immer 사용이 익숙하지 않고 하면 그냥 안쓰고 불변성 유지를 하면 된다!
