리액트의 불변성

minkyung·2022년 7월 17일
0

react

목록 보기
5/5

리액트는 '함수형 프로그래밍'을 지향한다

함수형 프로그래밍?

  • 순수함수를 사용함
    순수함수
    ① 동일한 매개 변수를 넣었을 때 동일한 리턴 값을 출력하는 함수
    외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수
    ➜ 불변성과 연관됨

원시타입의 불변성

원시타입은 재할당을 해도 메모리 영역에서 대체되는 것이 아니라 새로운 영역에 할당됨

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

  1. 리액트의 상태 업데이트를 하는 원리 때문에.
    리액트는 상태값을 업데이트할 때 얕은 비교를 수행함. 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지함.
    ➜ 원시타입이 아닌 array, object 등의 데이터들에게는 spread operator, map, filter, slice, reduce 메소드들을 사용해서 불변성 지켜줌 (기존의 데이터를 복사해서 새로운 배열을 만들어내는 메소드들)

  2. 사이드 이펙트 방지때문에
    외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본 데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있음.
    ➜ 외부의 값을 함부로 변경할 수 있으면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있음.

profile
프론트엔드 개발자

0개의 댓글