10.12.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-23챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 리액트에서 객체의 불변성은 지켜주고 아껴줘야됨

---

이미 다른 챕터에서도 여러번 강조했던 내용이라 알고 있지만 다시금 마음에 새기자.

이렇게 하면 안되고

const object = {
  a: 1,
  b: 2
};

object.b = 3;

이렇게 spread연산자 사용해서 지켜주자 불변성

const object = {
  a: 1,
  b: 2
};

const nextObject = {
  ...object,
  b: 3
};

---

2. 근데 리액트에서 배열도 마찬가지로 불변성 지켜줘야됨을 알게됨

---

push나 splice등으로 직접 항목을 수정하거나 삭제하면 안됨.

concat이나

const inserted = todos.concat({
  id: 3,
  text: '할 일 #3',
  done: false
});

filter 또는

const filtered = todos.filter(todo => todo.id !== 2);

map 등의 함수를 반드시 사용해서 수정해줘야 얕은 복사가 아닌 깊은 복사가 됨.

const toggled = todos.map(
  todo => todo.id === 2
    ? {
      ...todo,
      done: !todo.done,
    }
    : todo
);

---

3. 객체안에 또 다른 객체를 찾아서 값을 추가해줘야 하는 복잡한 경우 immer를 immer 사용해야됨

---

코드의 구조가 복잡해지면 한눈에 안들어옴.

단, immer는 JS 엔진의 Proxy 기능을 사용하는데 RN환경에선 지원 잘 안되므로

불변성을 유지하면서 업데이트 하고 싶을 때 정말 어쩔 수 없는 경우에 immer를 사용하면 좋음.

---

4. 성능적으론 immer를 사용하지 않은 코드가 조금더 빠름도 알게됨

---

애초에 코드가 복잡해지지 않도록 자료구조를 짜는것이 베스트임.

간단히 처리 될 수 있는 곳에선 그냥 js쓰는걸 지향하도록 해야됨을 알게됨.

immer가 사용되기 부적절한 케이스는 책을 통해 참고하면 좋음.

---

5. immer 는 설치해준 후 보통 produce라는 이름으로 불러옴

---

$ yarn add immer

import produce from 'immer';

그리고 produce 함수를 사용할 땐 첫번째 파라미터는 수정하고 싶은 상태,

두번째 파라미터에는 어떻게 업데이트 하고 싶은지 정의하는 함수를 넣어줘야됨.

const state = {
  number: 1,
  dontChangeMe: 2
};

const nextState = produce(state, draft => {
  draft.number += 1;
});

console.log(nextState);
// { number: 2, dontChangeMe: 2 }

---

6. immer 첫번째 파라미터 생략하고 두번째파라미터에 함수형 업데이트를 하면 불변성 유지 안됨

---

결국 produce가 직접 객체를 업데이트 하는 함수가 되므로 useState 함수를 사용할때 함수형 업데이트 응용가능함.

const [todo, setTodo] = useState({
  text: 'Hello',
  done: false
});

const onClick = useCallback(() => {
  setTodo(
    produce(draft => {
      draft.done = !draft.done;
    })
  );
}, []);

위에는 state의 값을 직접 수정하고 싶을때 produce를 활용하면 좋다는 예시임.

원래는 깊은 복사를 위해 spread 연산자를 아래처럼 사용하지만 상황에 따라 얕은 복사가 필요할 때도 있으므로.

유연하게 활용하는 것이 중요함을 알게됨.

const onClick = useCallback(() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));
}, [])

---