React 불변성

불변성

사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미한다.

Boolen, Number, String, null, undefined, Symbol 과 같은 타입들은 불변성을 유지하는 타입들이고 Object 타입들은 변경 가능한 값들이다.

// 원시타입
const [number, setNumber] = useState(0)
setState(3)

// 참조타입
const [person, setPerson] = useState({ name: '', age: 30 })
setState({...person, name: 'pyo'})

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

부모 컴포넌트가 re-rendering 되거나 state, props가 변화될 때 렌더링이 일어난다. 근데 렌더링을 할지 말지 판단하기 위해 state 객체 내의 모든 value를 다 깊은 비교하면 효울적이지 않다. 그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성 유지가 중요하다.

1. 효율적인 상태 업데이트 (얕은 비교 수행)

   1. 얕은 비교란 객체의 프로퍼티를 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인

2. 사이드 이펙트 방지 및 프로그래밍 구조의 단순성

   1. 원시 타입은 애당초 불변성을 가지고 있지만 참조 타입인 객체나 배열의 경우 새로운 값을 변경할 때 원본 데이터가 변경된다. 이때 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생 할 수 있다.
   • Side-Effect : 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위이다.
     • Side-Effect는 절차형 프로그래밍에서 흔히 존재하는 작업이었다, 하지만 Side-Effect는 프로그램을 읽기 어렵게 하고, 실행 상태를 예측하기 어렵게 하며 개발 비용을 증가 시킨다고 보기에 Side-Effect를 최소화하는 방향으로 변하고 있다. → useEffect()를 사용해서 Side-Effect 처리한다.

어떻게 지킬까

spread operator, map, filter, slice, reduce 등 새로운 배열을 반환하는 메소드들을 활용한다.

• splice는 원본 데이터를 변경

setState를 이용할 때 원시 타입 경우에는 값을 바로 넣어주면 되지만 참조 타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어준다.

정리

1. 불변성 → 메모리 영역의 값을 변경 할 수 없는 것
2. 리액트는 불변성을 지켜줌으로써 효율적인 상태 업데이트를 한다
3. 리액트는 불변성을 지켜줌으로써 사이드 이펙트를 사전에 방지하고 프로그래밍의 구조를 단순하게 유지
4. 불변성을 가진 원시 타입과 달리 참조 타입의 경우에는 의도적으로 불변성을 지켜줘야 한다
5. spread operator, map, filter, slice, reduce 메소드를 활용