4.1.1 불변성을 지켜야 하는 이유

리액트에서 불변성을 지켜야 하는 이유는 렌더링 성능 최적화 방식 때문입니다. 리액트에서는 부모 컴포넌트가 리렌더링(상태가 업데이트되어 다시 렌더링되는 것)되면 기본적으로 자식 컴포넌트들 또한 리렌더링됩니다. 예를 들어, 우리가 만든 프로젝트의 App 컴포넌트가 리렌더링되면 DateHead, Empty, AddTodo가 모두 리렌더링됩니다. 즉, 작성한 함수들이 한번 더 호출되는 것이죠. 문제는 변경사항이 없을 때도 리렌더링된다는 것입니다.

리액트는 최적화가 정말 많이 되어 있기 때문에 렌더링이 불필요한 컴포넌트가 리렌더링된다고 해서 일반적으로는 성능에 부하가 발생하지 않습니다. 컴포넌트가 리렌더링된 후에는 그 결과물이 기존 결과물과 차이가 있으면 화면에 보이는 UI를 건드리고, 그렇지 않으면 기존 UI를 그대로 유지합니다.

그런데 컴포넌트에서 다루는 데이터가 많아지거나 연산량이 늘어난 경우에는 컴포넌트에 정말 변화가 발생했을 때만 리렌더링하도록 최적화할 수 있습니다. 컴포넌트에 변화가 필요한지 필요하지 않은지는 어떻게 알 수 있을까요? 바로 Props의 변화를 통해 알 수 있습니다. 컴포넌트의 렌더링 성능을 최적화하기 위해서는 이전에 컴포넌트가 들고 있던 Props와 새로 받아올 Props를 비교하는 과정이 필요합니다. 이 과정에서 불변성을 유지하는 것이 정말 중요해집니다. 다음 코드를 한번 확인해보세요.

const data = { id: 1, text: '안녕하세요' };

const sameData = data;
sameData.text = '안녕히계세요';

console.log(sameData === data); // true