불변성을 'React에서 그렇게 해야 한다더라'로 외운 사람과, 참조 비교·변경 추적·사이드이펙트 격리라는 원리까지 묶어 답하는 사람을 구분하려는 질문이다. 답에 따라 얕은/깊은 복사, Immer, 리렌더 최적화로 깊이를 캐물을 수 있다.
불변성은 한 번 만든 값을 직접 바꾸지 않고, 변경이 필요하면 새 값을 만들어 갈아끼우는 원칙이다. 자바스크립트의 객체·배열은 기본이 가변이므로 불변성을 지키려면 스프레드, Object.assign, 구조 분해 같은 도구로 새 참조를 명시적으로 만들어야 한다. 핵심 동작은 '값을 수정한다'가 아니라 '참조를 교체한다'다. 그래서 React 같은 렌더러는 이전 참조와 새 참조를 얕게 비교해 변경 여부를 판단한다.
state를 직접 push했다가 화면이 안 갱신되는 버그를 잡았던 경험이 있다면 참조 비교와 불변성의 연결을 자기 말로 풀 수 있다
중첩 객체 한 군데를 바꾸려고 스프레드를 여러 겹 쌓다가 코드가 너무 무거워져 Immer 같은 도구를 도입한 경험이 있다면 불변성의 비용과 도구의 자리를 설명할 수 있다
Redux 리듀서를 직접 짜면서 매번 새 객체를 반환하도록 신경 썼던 경험이 있다면 변경 감지가 무엇을 보고 일어나는지 근거로 댈 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.