State나 props 같은 데이터를 변경할 때 ,
기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것
불변성을 지켜야 하는 이유
- 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다.
- 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다.
- 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다.
지키는 방법
1.객체나 배열을 직접 수정하지 않기
- 새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.
- 스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다.
2.불변성을 보장하는 함수 사용
- map , filter , reduce와 같은 배열 메서드를 사용해 새로운 배열을 생성한다.
결론 : 불변성을 지키지 않으면예기치않은 버그가 발생하거나 성능저하가 발생할 수 있다.
'Front-End > React' 카테고리의 다른 글
Context API (0) | 2024.07.26 |
---|---|
메모이제이션 (1) | 2024.07.26 |
코드분석(To-do-list) (3) | 2024.07.24 |
조건부 렌더링 (0) | 2024.07.24 |
children (0) | 2024.07.23 |