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 Hooks' 카테고리의 다른 글
[커스텀 Hooks] 코드가 반복되는 것을 느낀다면 사용하자 (0) | 2022.01.11 |
---|---|
[useRef] useRef가 가진 2가지 기능 (0) | 2022.01.08 |
[useReducer] 여러 상태 값을 사용 한다면 useReducer (0) | 2022.01.05 |