(TIL 17일차) React (6)

pks787·2020년 2월 13일
0

TIL(Today I Learned)

목록 보기
10/27

Immer 라이브러리

  • 기존의 배열이나 객체를 변경할 때 직접 수정이 아닌 불변성을 지켜주면서 변경함
  • Ex) push,splice 사용 X, concat,filter,map O
  • 그러나 배열이나 아래와 같이 객체의 구조가 복잡해지면 원하는 요소에 접근하기 힘듦

이러한 문제를 해결해주는 ⭐Immer⭐ 라이브러리❗

  • 상태 업데이트 시 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리 담당

Immer 사용법

  1. immer 라이브러리 설치
  1. 보통 produce라는 이름으로 import 해줌
  1. produce 함수 첫번째 파라미터는 수정하고 싶은 상태, 두번째 파라미터는 어떻게 업데이트하고 싶은지 정의 하는 함수 작성

리듀서에서 Immer 사용하기

기본 함수형 컴포넌트에서 Immer 사용하기

  • 위와 같이 첫번째 파라미터 없이 바로 업데이트 함수만 있으면 useState 업데이트 함수를 사용 할 때

사용 예외의 경우

  • Immer를 사용해서 간단해지는 업데이트가 있고, 오히려 길어지는 코드도 존재
  • 객체의 구조가 복잡하지 않고 간단한 경우 concat이나 filter를 사용하는 것이 더 유리

정리

  • 성능적으로는 Immer를 안 쓰는 것이 더 빠름
  • 불변성을 유지하기 복잡한 상황이 오면 사용하도록 권장
  • 무조건 사용한다는 생각은 버리기

profile
Front End. Dep

0개의 댓글