[프론트엔드] React의 불변성 / 얕은비교

Question :  불변성이 무엇인지 설명하시오

 

Answer : 리액트에서 불변성(immutability)은 상태를 직접 수정하지 않고, 상태 변경 시 새로운 객체를 생성하는 개념입니다. 이는 성능 최적화와 예측 가능한 상태 관리를 위해 중요합니다. 상태나 props가 변경되면 새로운 객체가 생성되어, 리액트는 얕은 비교(shallow comparison)를 통해 이전 상태와 새로운 상태의 참조값을 비교합니다. 참조값이 다르면 리렌더링을 수행하고, 같으면 생략하여 불필요한 리렌더링을 방지합니다. 불변성을 유지하면 코드의 안정성과 유지보수성이 향상되며, 디버깅이 용이해집니다.

 

---

 

Question :  React 불변성을 유지해야 하는 이유를 설명하시오

 

Answer : 리액트에서 불변성을 유지하는 이유는 성능 최적화와 예측 가능한 상태 관리를 위해서입니다. 불변성을 따르면 상태 변경 시 새로운 객체를 생성하므로 이전 상태와 쉽게 비교할 수 있어 효율적인 리렌더링이 가능합니다. 이는 shouldComponentUpdate나 React.memo와 같은 최적화 기법과 연계되어 불필요한 리렌더링을 방지합니다. 또한, 상태 변화가 예측 가능해지고 디버깅이 용이해지며, Redux 같은 상태 관리 라이브러리와의 호환성이 좋아집니다. 결과적으로, 코드의 안정성과 유지보수성이 향상됩니다.

 

---

Question :  얕은 비교에 대해 설명하시오

 

Answer : 얕은 비교(shallow comparison)는 객체의 참조값만 비교하는 방식입니다. 객체 내부의 속성이나 값까지 비교하는 깊은 비교(deep comparison)와 달리, 얕은 비교는 두 객체가 같은 참조를 가리키는지 여부만 검사합니다. 이는 주로 리액트에서 성능 최적화를 위해 사용되며, 상태 변경 시 이전 상태와 새로운 상태의 참조값을 비교하여 동일하면 리렌더링을 생략합니다. 얕은 비교는 빠르게 동작하지만, 객체 내부 값이 변경되어도 참조값이 같다면 변화를 감지하지 못할 수 있습니다. 주로 shouldComponentUpdate, React.memo, PureComponent 등에서 사용됩니다.

 

---

Question :  React 에서 얕은 비교를 사용하는 이유를 설명하시오

 

Answer : 리액트가 얕은 비교를 하는 이유는 성능 최적화와 효율적인 리렌더링을 위해서입니다. 얕은 비교는 객체의 참조값만 비교하므로, 속성 값을 하나하나 비교하는 깊은 비교보다 훨씬 빠릅니다. 이를 통해 리액트는 상태나 props가 변경되지 않았을 때 불필요한 리렌더링을 방지할 수 있습니다. 특히 shouldComponentUpdate, React.memo, PureComponent에서 얕은 비교를 사용하여, 상태나 props의 참조값이 동일하면 리렌더링을 생략합니다. 이 방식은 애플리케이션의 성능을 크게 향상시키며, 불변성을 유지하면 상태 변경 시 새로운 객체가 생성되므로 얕은 비교가 정확하게 작동합니다.

 

---