6장 - 불변성에 대한 pros & cons

[haryan248]

@jangsumin 님이 6장을 정리하면서 느낀점을 적어주셨습니다.

- 배열이나 객체를 쓰는 동작으로 바꾸지 않기 위해 읽기 함수를 만든다는 게 어려운 일인 것 같다.
- 개인적으로, 불변성을 지키기 때문에 무엇이 좋은지 완전히 받아들이기 어려운 상태다.
- 적어도, 객체에 대한 카피-온-라이트 패턴을 사용하는 것은 오랜 시간이 걸릴 것 같다. 왜냐하면 프로퍼티에 쓰기 동작은 겨우 한 줄인데, 읽기 함수를 만듦으로써 5줄을 더 작성해야 한다.

• 불변성을 지키는 것이 과연 정답일까?
  • 맞다면 그것을 위해 적용해야하는 코드나 패턴들이 과연 효율적인가? (책에서는 카피-온-라이트 패턴을 사용해 불변성을 유지하는 방법을 소개함)
  • 아니라면 불변성을 지키지 않고 사용해도 문제가 없을까?

의견이 있으시면 편하게 적어주세요~

[samseburn]

먼저 수민님 느낀점 공유 감사해요!

프로그래밍이라는 큰 주제에서 불변성을 지키는 게 맞냐 아니냐를 얘기하기가 모호해서 주제를 프론트엔드에서 주로 사용하는 라이브러리/프레임워크에서의 불변성으로 좀 좁혀봤어요.

제가 알기로 리액트는 불변성을 기반으로 상태 관리를 하고 있고, 그렇기 때문에 공식 문서에서도 순수성을 유지하는 것이 중요하다고 여러 번 강조하고 있는 걸로 알고 있어요. 리액트는 메모리 주소로 값을 비교하기 때문에, 객체나 배열 같은 참조형 데이터는 원시형과 다르게 직접 수정하면 리액트가 변경을 감지하지 못하니까요.

• https://ko.react.dev/learn/keeping-components-pure
  • 이 링크는 리액트 공식문서의 챌린지 예제 중 하나인데, 해당 예제가 책에서 제시하는 카피-온-라이트 개념으로 문제를 해결하고 있는 것 같아 들고 왔습니다.

그럼에도 불구하고 순수성을 지킬 수 없는 경우, 즉 불변성이 필요한 경우도 물론 있기 때문에 useEffect, useRef 같은 훅들이 나온 것은 아닐까? 싶었어요.

• useEffect(사이드이펙트)
• useRef(렌더링되지는 않지만 동작해야 할 경우)

이렇게 정리하다 궁금해서 리액트와 유사한 용도로 쓰는 다른 프레임워크는 어떻게 상태를 관리하는지 찾아보니..

Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환합니다.

Vue.js는 리액트처럼 불변성을 감지하는 형태로 관리하지는 않는다고 하네요. (그렇다고 하는데 Vue.js를 사용해본 적이 없어 맞는지 모르겠어요.)

어쨌든 리액트와 뷰는 각각 다른 상태관리 방식을 채택하고 있고, 이를 보면.. 불변성을 지켜야만 문제를 해결할 수 있는 건 아닌 것 같습니다. 다만 리액트의 특성상 효율적인 렌더링과 상태 관리를 위해 불변성이 중요한 요소로 작용하기 때문에 함수형 사고와 불변성을 잘 지켜서 개발하는 게 좋지 않을까 싶네요...!