useState와 매우 비슷하다.
첫 번째 값은 현재 상태
두 번째 값은 업데이트 함수이다.
// 설치 방법
npm install immer use-immer
상태값이 객체일 때
import { useImmer } from 'use-immer';
// 상태값이 객체일 때
function App() {
const [person, updatePerson] = useImmer({
name: "suhyeok",
age: "27"
});
const updateName = (name) => {
updatePerson(draft => {
draft.name = name;
});
}
const plusAge = () => {
updatePerson(draft => {
draft.age++;
});
}
}
상태값이 배열일 때
import { useImmer } from 'use-immer';
// 상태값이 배열일 때
function App() {
const [number, updateNumber] = useImmer([1,2,3]);
const updateName = (name) => {
updatePerson(draft => {
draft[0] = 0
});
}
}
// number 배열의 0번째 index가 1에서 0으로 변경된다.
상태를 객체, 배열로 관리할 때 불변성에 신경 안 써도 돼서 좋은 것 같다.
'React' 카테고리의 다른 글
[TabUI] react Tab UI 구현하기 (0) | 2022.01.13 |
---|---|
[커스텀 Hooks] 코드가 반복되는 것을 느낀다면 사용하자 (0) | 2022.01.11 |
[React] useRef에서 Ref가 궁금하다. (0) | 2022.01.08 |
[useRef] useRef가 가진 2가지 기능 (0) | 2022.01.08 |
[React] React에서 불변성이 왜 중요할까? (0) | 2022.01.07 |