web/react
불변성
방방곡곡
2022. 10. 21. 15:16
불변성 : 메모리에서 원래 값을 변경하지 않음( 원시타입만 해당됨 )
⇒ 변수 값 변경 시 기존 값을 덮어씌우는 것이 아니라 새로운 메모리 공간에 하고,
참조값을 변경해줌
리액트랑 뭔 상관?
- 리액트는 함수형 프로그래밍 지향
- 함수형 프로그래밍은 순수함수 사용
- 순수함수는 사이드 이펙트 발생 x ⇒ 불변성
왜 리액트에서 불변성을 지킴?
- 효율적 상태 업데이트
- 사이드 이펙트 방지, 프로그래밍 구조 단순화
주의
1. 리액트는 얕은 비교 사용
2. 참조 타입인 객체, 배열 값이 변경될 때 참조값은 그대로(불변성이 지켜지지 않음)
3. 고로 의도적으로 참조값을 변경시켜 줘야함
결론
의도적으로 새로운 배열을 반환하는 메서드 사용:
spread operator, map, filter, slice, reduce 등
기존 값을 변경하는 메서드 사용 X:
shift, splice, push 등