1. Immutability ?
2. immer 사용법
1. Immutability ?
- 정의 : Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미
- Javascript에서 객체는 참조(reference) 형태로 전달하고 전달 받는데, 그 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이 문제의 해결 방법은 비용은 조금 들지만 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하는 것이다.
- React에서 immutability
- React 컴포넌트의 state 를 변경해야 한다면 객체의 값을 직접적으로 수정하면 절대 안되고, 무조건 setState( ) 를 통해 state 를 업데이트 해주어야한다.
- 하지만 깊은 구조의 state 를 불변함을 유지하면서 업데이트 하려면 코드가 매우 복잡하게 되어 가독성이 떨어 매우 떨어지게된다.
- immer 라이브러리를 사용하면 불변성 관리문제를 매우 간단하게 해결할 수 있다.
2. immer 사용법
//예시코드
import porduce from 'immer';
const baseState = [
{
todo: "Learn typescript",
done: true
},
{
todo: "Try immer",
done: false
}
]
const nextState = produce(baseState, draftState => {
draftState.push({todo: "Tweet about it"});
draftState[1].done = true;
});
// 반환값
nextState = {
{
todo: "Learn typescript",
done: true
},
{
todo: "Try immer",
done: true
},
{
todo: "Tweet about it"
}
}
- produce 함수는 두 가지 파라미터를 받는다
- 첫번째 파라미터 : 수정하고 싶은 상태
- 두번째 파라미터 : 상태를 어떻게 업데이트할지 정의하는 함수
- https://immerjs.github.io/immer/docs/introduction
'Frontend' 카테고리의 다른 글
11. Asynchrony (비동기작업) (0) | 2020.10.25 |
---|---|
10. SPA 와 Routing (0) | 2020.10.25 |
8. React todo-app 1 (0) | 2020.10.25 |
7. Component Styling (0) | 2020.10.25 |
6. React Hooks (0) | 2020.10.25 |