불변객체와 순수 컴포넌트

불변객체 : 생성 후에 그 상태를 변경할 수 없는 객체

 

불변객체는 다음과 같은 특징을 가진다.

 

1. 상태 변경 불가 : 한 번 생성된 후엔 내부 상태가 변경되지 않음

 

2. 수정 시 새 객체 생성 : 데이터 변경이 필요한 경우, 기존 객체를 수정하는 대신 변경된 값을 가진 새로운 객체를 생성함

 

3. 원존 보존 : 원본 데이터는 항상 그대로 유지

// 일반 객체(가변 객체)
const user = { name: "민수" };
user.name = "수민"; // 원본 객체가 변경됨

// 불변 객체 방식
const user = { name: "민수" };
const newUser = { ...user, name: "수민" }; // 새 객체 생성, 원본은 유지

 

 

이러한 불변 객체, 객체의 불변성은 함수형 프로그래밍의 핵심 원리이다.

 

위에서 설명한 특징들을 토대로 불변객체를 사용 시, 복제 비교를 위한 조작을 단순화가 가능하고 성능개선에도 도움이된다.

 

• 참조 비교 최적화: 불변 객체는 변경되지 않기 때문에, 객체가 수정되면 새로운 객체가 생성됩니다. 이로 인해 객체 비교 시 단순한 참조 비교(reference equality)만으로 변경 여부를 빠르게 확인 가능
• 예측 가능한 상태 관리: 객체가 변경되지 않으므로 부작용(side effects)이 줄어들고, 애플리케이션의 상태 흐름을 예측하기 쉬워짐
• 메모리 효율성: 불변 데이터 구조는 구조 공유(structural sharing)를 통해 메모리를 효율적으로 사용 가능

 

 

---

 

순수 컴포넌트 :  순수함수에서 파생된 리액트 컴포넌트의 특성

 

컴포넌트를 순수하게 유지할 경우 다음과 같은 특징들을 가진다

 

• 결정적 출력(예측 가능성): 동일한 입력(props와 state)에 대해 항상 동일한 출력(렌더링 결과)을 생성
• 부작용 없음: 컴포넌트는 렌더링 외에 외부 상태를 변경하지 않음
• 외부 의존성 최소화: 컴포넌트의 동작은 전달받은 props와 내부 state에만 의존

 

 

순수 컴포넌트를 통해 React 뿐만 아닌 Vue에서 같은 프레임워크에서 최적화 기능과 함께 사용할 떄 성능 이점을 극대화 할 수 있음

 

 

순수 컴포넌트 자체 사용을 통한 성능은 다음과 같다.

 

• 불필요한 렌더링 방지: 순수 컴포넌트는 같은 props에 대해 항상 같은 결과를 렌더링합니다. React의 PureComponent나 React.memo() 같은 최적화는 얕은 비교(shallow comparison)를 수행하여 props나 state가 변경되지 않았다면 컴포넌트 리렌더링을 건너뜀
• 렌더링 최적화: props와 state가 불변 객체라면, 객체 내부의 깊은 비교가 아닌 참조 비교만으로도 변경 여부를 확인할 수 있어 렌더링 결정이 빨라짐
• 예측 가능한 동작: 순수 컴포넌트는 동일한 입력에 대해 항상 동일한 출력을 생성하므로 테스트와 디버깅이 용이

 

---

 

함께 사용할 때의 시너지

위에서 알게된 불변객체를 순수 컴포넌트와 함께 사용하면 더 좋은 시너지를 이끌어낼 수 있다.

 

1. 불변 객체를 props로 전달할 때, 변경이 있을 경우에만 새로운 참조가 생성됩니다.
2. 순수 컴포넌트는 props의 참조만 비교하여 빠르게 렌더링 여부를 결정할 수 있습니다.
3. 결과적으로 변경이 있는 컴포넌트만 리렌더링되어 전체 애플리케이션 성능이 향상됩니다