Post

객체를 상태로 다룰 때 불변성을 유지해야 하는 이유

✨불변성?

값이나 상태를 변경되지 않는 것s

기존의 상태 값을 변경하지 않고, 새로운 상태값을 추가하는 것

🔍리액트에서 불변성을 지켜야하는 이유?

리액트는 컴포넌트가 가지고 있는 props와 state의 이전, 이후의 값을 확인하고, 업데이트를 처리하기때문이다.
기존의 상태 값과 새로운 상태값이 동일하다면 변경된 것을 감지하지 못해 업데이트를 하지 않기때문에 불변성이 지켜져야한다.

1. 성능 최적화

변경된 내용만 업데이트가 되기때문에 메모리 및 CPU 사용량을 최적화할 수 있다

2. 예측 가능한 업데이트

상태가 변경될 때, 이전 상태와 비교하여 변경된 부분을 감지하기 때문에 예측이 가능하며 디버깅에 유리하다

3. 사이드 이펙트 방지

사이드 이펙트?

함수나 프로그램이 외부의 상태를 변경하거나 외부에 영향을 주는 것

원본 데이터를 수정하지 않고, 원본데이터의 복사본을 만들어 데이터를 변경하기때문에 예기치 못한 오류를 사전에 방지할 수 있다

✨불변성을 지키는 방법?

spread operator(…;스프레드 연산자), map, filter, slice, reduce 등 새로운 배열을 반환하는 메소드를 활용 또는 새로운 변수에 복사본을 저장하여 사용하기

This post is licensed under CC BY 4.0 by the author.