불변성이란 배열이나 객체가 생성되면 상태를 변경할 수 없음을 의미합니다.
불변성을 지켜야 하는 이유는 상태를 직접 수정할 때 발생할 수 있는 버그나 예상치 못한 동작을 방지할 수 있기 때문입니다.
또한 리액트는 상태가 변경되었는지 얕은 비교를 통해 확인하기 때문에 불변성을 지킴으로써 불필요한 리렌더링을 피할 수 있습니다.
불변성을 지키면 리액트의 렌더링을 최적화하고 성능을 향상시킬 수 있습니다.
어떻게 불변성을 지킬 수 있나요?
스프레드 연산자나 concat, filter 등의 배열 메서드, immer 라이브러리를 사용하여 새 배열, 객체를 생성하여 지킬 수 있습니다.
꼬리질문 - 왜 그것들을 사용해야 하나요?
리액트의 state 변화 감지 기준은 콜스택의 주소값입니다.
원시 타입에 변화가 일어나면 새로운 메모리 영역에 값을 저장하기 때문에 콜스택의 주소값의 변화가 감지됩니다.
하지만 참조 타입은 값이 변경되더라도 메모리 힙에서 변경이 되고 콜스택에 있는 주소값은 변경되지 않습니다. 따라서 리액트는 state의 변경이 없다고 감지하기 때문에 변경된 state는 재렌더링이 되지 않습니다.
따라서 spread 연산자, concat, filter 등의 메서드, immer 라이브러리를 통해서 새로운 배열 또는 오브젝트를 만들어 반환하는 것입니다.
React에서 불변 데이터 구조를 사용하면 어떤 이점이 있나요?
변경할 수 없는 데이터 구조를 사용하면 상태에 대해 더 쉽게 추론하고 상태 변경이 응용 프로그램의 다른 부분에 실수로 영향을 주지 않도록 합니다.
불변성은 React의 Virtual DOM에 어떤 영향을 주나요?
불변성은 React가 구성 요소의 이전 상태와 현재 상태를 빠르게 비교하고 UI의 어느 부분을 업데이트해야 하는지 결정할 수 있도록 하기 때문에 React의 Virtual DOM에 필수적입니다. 데이터 구조를 불변으로 유지함으로써 React는 어떤 구성 요소가 변경되었는지 쉽게 식별하고 UI를 업데이트하는 데 필요한 최소한의 업데이트를 생성할 수 있습니다.
React에서 구성 요소가 효율적으로 업데이트되도록 하려면 어떻게 해야 하나요?
React에서 구성 요소가 효율적으로 업데이트되도록 하려면 상태와 소품을 가능한 한 단순하게 유지하고 불변 데이터 구조를 사용하여 데이터를 저장하는 것이 중요합니다. 렌더링을 최적화하고 UI에 대한 불필요한 업데이트를 최소화하기 위해 shouldComponentUpdate 수명 주기 메서드를 사용하는 것도 중요합니다.