💡 불변성이란 ?
불변성의 사전적 의미는 값이나 상태를 변경할 수 없음을 의미합니다.
프로그래밍에서의 불변성은 메모리 영역에서 값이 변하지 않도록 하는 것을 의미합니다. 즉, 초기에 할당한 값 자체를 변경하면 안된다는 것입니다.
그러면 리액트에서 왜 불변성을 유지해야 할까요?
리액트는 state(상태)를 업데이트할 때, 이전 상태와 새로운 상태를 비교하여 렌더링을 결정합니다. 이를 위해 리액트는 객체나 배열의 참조 주소만 비교하여 상태 변화를 감지합니다.
🛠️ 리액트에서 불변성을 유지해야 하는 이유
- 효율적인 변경 감지: 리액트는 상태의 변경을 감지할 때, 객체나 배열의 참조를 비교합니다. 불변성을 유지하면 새로운 상태를 생성할 때 항상 새로운 참조를 가지므로, 리액트는 상태가 변경되었음을 쉽게 감지할 수 있습니다. 반대로, 상태를 직접 변경하면 참조가 동일하게 유지되어 리액트가 변경을 인식하지 못할 수 있습니다.
const [person, setPerson] = useState({ name: 'John', age: 25 });
// 불변성을 유지한 상태 업데이트
setPerson(prevPerson => ({
...prevPerson,
age: prevPerson.age + 1
}));
// 직접 상태를 변경한 경우
person.age += 1; // 참조는 동일
setPerson(person); // 리액트는 변경을 감지하지 못할 수 있음- 예측 가능한 상태 관리: 불변성을 유지하면 상태의 변경이 예측 가능해집니다. 상태가 직접 변경되지 않기 때문에, 특정 시점의 상태를 정확하게 추적할 수 있어 디버깅이 용이해집니다.
- 최적화된 성능: 불변성을 유지하면
React.memo와 같은 최적화 기법을 효과적으로 사용할 수 있습니다. 이는 불필요한 렌더링을 방지하여 애플리케이션의 성능을 향상시킵니다.
⚠️ 불변성을 지키지 않으면 ?
- 렌더링 문제: 상태를 직접 변경하면 리액트가 변경을 감지하지 못해 컴포넌트가 다시 렌더링되지 않을 수 있습니다. 이는 UI가 최신 상태를 반영하지 못하게 됩니다.
- 성능 저하: 불변성을 유지하지 않으면 최적화 기법들이 제대로 작동하지 않아 불필요한 렌더링이 발생할 수 있습니다.
🧩 불변성을 유지하는 방법
- 스프레드 연산자 사용: 객체나 배열을 업데이트할 때 스프레드 연산자를 사용하여 복사본을 생성합니다.
// 객체 업데이트
setPerson(prevPerson => ({
...prevPerson,
age: prevPerson.age + 1
}));
// 배열 업데이트
setItems(prevItems => [...prevItems, newItem]);- 객체 및 배열 메서드 활용: 불변성을 유지하는 메서드
mapfilterconcat등 사용하여 새로운 배열이나 객체를 생성합니다.
// 배열 요소 수정
setItems(prevItems => prevItems.map(item =>
item.id === targetId ? { ...item, value: newValue } : item
));
// 배열 요소 삭제
setItems(prevItems => prevItems.filter(item => item.id !== targetId));📝 결론
리액트에서 불변성을 유지하는 것은 상태 관리의 핵심 원칙 중 하나입니다. 불변성을 지킴으로써 리액트는 효율적으로 상태 변화를 감지하고, 예측 가능한 UI 업데이트를 수행할 수 있습니다. 불변성을 유지하는 습관을 들이면, 더욱 안정적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다.
리액트의 강력한 성능과 예측 가능한 동작을 최대한 활용하려면 불변성 원칙을 철저히 따르는 것이 필수적입니다.
✅ 참고
반갑습니다