본문 바로가기

Front-End/React

리액트 불변성

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