[Javascript] React 와 불변성의 관계 요약정리

개념 설명 못해서 혼나고 쓰는 글 . .

 

---

불변성 : 메모리 영역에서 값을 변경할 수 없다

 

원시타입이 아닌 참조타입의 예시 코드를 살펴보자

let x = {
  name: 'joam'
};

let y = x;

x.name = 'sso';

console.log(y.name); // sso
console.log(x === y) // true

위 코드에서 x 객체와 y 객체의 데이터의 주소를 똑같이 참조하고 있기에 (얕은 복사)
x 객체에 접근했음에도 y 객체의 값이 달라지는 걸 알 수 있다

위처럼 쉬운 예시가 아닌 다른 어딘가에서 객체의 값을 변경한다면 디버깅이 힘들어질 수 있다 (사이드 이펙트 및 프로그래밍의 복잡도 상승)
그래서 let y = { ...x } 라는 spread 연산자를 쓰며 불변성을 유지시키곤 한다 (깊은 복사)

---

그래서 React 에서는?

React에서 state 의 변화값을 비교하는 데에서는, 불변성을 지켜주어야 변경됨을 인지한다

React의 함수형 프로그래밍에서 사용되는 순수함수는,
동일한 값을 인풋하였을 때 동일한 값을 아웃풋하는 함수를 뜻하며,
외부의 값을 변경하는 것과 같은 사이드 이펙트를 막는 함수이다

즉, 객체의 참조 주소값만 변경되었는지 확인함으로써 계산 리소스를 줄여준다

이를 방지하기 위해
spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하여 setState를 실행한다

---

그러나 spread operator 로도 다음과 같은 구조일 때는 조금 복잡하다

state = {
  where: {
    are: {
        you: {
          now: 'faded',
          away: true // 이 부분을 바꾸고 싶다
        },
      so: 'lost'
    },
    under: {
      the: true,
      sea: false
    }
  }
}

// -->

const { where } = this.state;
this.setState({
  where: {
    ...where,
    are: {
      ...where.are,
      you: {
        ...where.are.you,
        away: false
      }
    }
  }
});

이를 편하게 하기 위해 Immutable.js 같은 불변 객체를 반환해주는 라이브러리를 사용하기도 한다

 

---

https://hsp0418.tistory.com/171

리액트 불변성이란 무엇이고, 왜 지켜야 할까?

https://github.com/BKJang/dev-tips/issues/42

React의 state는 왜 불변성을 유지해야할까? 왜 Immutable.js 를 사용할까? · Issue #42 · BKJang/dev-tips