TIL #19 | 리액트에서 불변성이 중요한 이유

불변성이 중요한 이유

불변성이란?

한번 생성된 원본의 데이터는 변경시키지 않고, 데이터 변경이 필요할 때 새로운 원본을 만드는 디자인 패턴

1. 리액트 Life Cycle에 따른 리렌더링 규칙
   리액트는 state 변경 전 후의 값을 얕은 비교하여 다른 경우에만 리렌더링한다.
   얕은 비교란 참조값의 경우 주소끼리 비교하고, 원시값은 데이터값 그 자체끼리 비교하는 것이다.
   그런 이유로 참조값의 객체 안 데이터가 바뀔 경우 메모리의 주소는 여전히 같기 때문에 리액트가 state의 변경을 인식하지 못해 리렌더링이 발생하지 않는 문제가 발생한다.
   이러한 경우 깊은 복사와 useState를 사용하여 새로운 객체를 만들어준다.

2. Side Effect
   객체형 상태 내부 값에 접근해서 직접 데이터를 변경할 경우 이 객체와 연결되어 있는 다른 데이터가 변경됨에 따른 예상치 못한 버그를 일으킬 수 있다.

불변성을 지키는 수단

Spread Operator

깊은 객체라면 가독성이 떨어지고 복잡해 보일 수 있다. 이러한 경우 불변성 지원 라이브러리를 사용할 수 있다.

const [obj, setObj] = useState({
  name: "Kim",
  age: 30
})

const increaseAge = () => {
  setObj({..obj, age: obj.age + 1});
  

immer.js

불변성 지원 라이브러리

depth가 깊은 중첩 객체를 상태로 가질 경우, 불변성 여부를 점검하기 어려워지기 때문에, mutable한 문법으로도 불변성을 지킬 수 있는 immer 라이브러리 사용을 권장한다.

import { produce } from "immer";

const [obj, setObj] = useState({
  name: "Kim",
  contact:  {
    email: "hi@gmail.com",
    phone: "010-1234-5678"
  }
})

const changeEmailTo = (newEmail) => {
  setObj(
    produce(draftObj => {
      draftObj.contact.email = newEmail;
    })
  )
}

순수 함수

동일한 입력값에는 동일한 출력값을 보장하며, 외부 상태에 영향을 끼치지 않는 함수

순수 함수 2원칙

• same input, same output
• No side effect

함수를 구성할 때 순수 함수의 원칙을 꼭 지켜야 원치 않는 오류를 방지할 수 있다.

---

요약 및 회고

오늘은 React에서 불변성이 중요한 이유와 불변성을 지키기 위한 방법에 대해 알아보았다.
불변성이란 한번 생성된 원본의 데이터는 변경시키지 않고, 데이터 변경이 필요할 때 새로운 원본을 만드는 디자인 패턴이다. 불변성을 지키기 위해 spread operator과 같은 문법과 immer.js와 같은 라이브러리를 사용할 수 있다.