immer

immer

1. immer

 - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나

 - 상태 관리업데이트를 보다 간편하게 만들어줌

 - 불변성을 지키면서 상태 업데이트 가능

 

2. 사용방법

    ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer)

 - produce 함수 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용함수 안에서 변경

const userState = {
  name: 'Kim',
  age: 15,
};

const newState = userState(state, (draft) => {
  draft.age += 1;
});

console.log(newState);

 

 - 중첩된 객체와 배열의 업데이트를 처리하는 데도 효과적임 (내부 객체 or 배경변경 시, 자동으로 불변성 유지)

const state = {
  user: {
    name: "Kim",
    family: ["Father", "Mother"]
  }
};

const newState = produce(state, (draft) => {
  draft.user.name = "Lee";
  draft.user.family.push("Sister");
});

console.log(newState);

'Front-End Study > React' 카테고리의 다른 글

Prop Drilling과 Contect API  (0) 2024.04.29
public 폴더에서 이미지 가져오기  (0) 2024.04.22
React 프로젝트 생성  (0) 2023.09.08
useParams  (0) 2023.09.06
NavLink  (0) 2023.09.06