[React] 12장 : immer 라이브러리

0
post-thumbnail

컴포넌트에서 상태를 업데이트 할때는 불변성을 유지하면서 상태를 업데이트 하는것이 중요하다. 불변성이 지켜지지 않으면 객체 내부의 값이 바껴도 감지를 못하기 때문이다.

// immer 설치
$ yarn add immer

여태까지는 기존의 값을 유지하면서 원하는 값을 새로 지정하지 위해 전개 연산자(...)를 사용했는데 사용하기에 좀 번거롭다. 또한 전개 연산자를 사용해서 객체나 배열 내부의 값을 복사하면 얕은 복사를 하기 때문에 내부의 값을 완전히 새로 복사하는것이 아니다!

배열이나 객체의 구조가 복잡할때 코드가 복잡해지고 작성하는것이 번거운데, 이러한 번거로운을 해결해주는 것이 immer 라이브러리다.

1. produce 함수

immer 라이브러리의 produce 함수는 두가지 인자를 받는다. 첫번째 파라미터는 수정하고 싶은 상태, 두번째 파라미터는 업데이트 함수이다.

두번째 파라미터로 업데이트 함수를 전달할 경우, 전달하는 업데이트 함수에서 원하는 값을 변경하면 produce함수가 알아서 불변성을 유지하면서 업데이트 해준다.
(만약, 첫번째 파라미터로 업데이트 함수를 대입하면 업데이트 함수를 반환한다.)

immer라이브러리의 장점은 불변성을 신경쓰지 않는것처럼 코드를 짜도 불변성 유지를 해준다는 것이다.

2. useState와 immer 함께 사용

이전 글(11장)에서 useState의 세터함수에서 함수형 업데이트 사용하는 법을 배웠는데, 이 함수형 업데이트와 immer의 produce 함수를 같이 쓰면 코드가 더 간결해진다.

세터함수 ( produce ( draft => { } ) );

profile
재미있는 아이디어 떠올리는 것을 좋아하고, 이를 구현하여 세상에 즐거움을 선물하고 싶은 사람입니다.

0개의 댓글