[React] props와 state의 차이 / React에서 불변성을 지키는 이유

props와 state의 차이

 

Props와 State는 모두 컴포넌트의 데이터를 다루는 데 사용하며 일반 Javascript 객체이다

목적과 사용 방법에 차이점이 존재한다.

 

 

 

 

---

 

 

 

React에서 불변성을 지키는 이유

불변성이란?

 

 

불변성의 사전적 의미는 값이나 상태를 변경할 수 없는 것을 의미

원시데이터 ( Boolean, Number, String, null, undefined, Symbol )  --> 불변성이 있다

원시데이터가 아닌 데이터( Object, Array, Function )  --> 불변성이 없다

 

 

원시데이터 불변성의 예시

 

 

1. 변수 a는 ‘data1’ 에서 ‘data2’로 변경

2. 총 2개의 메모리 영역 사용 ( 실제 메모리영역에는 ‘data1’, ‘data2’ 둘 다 존재 )

3. 메모리 영역에서 ‘data2’는 ‘data1’을 대체하는 것이 아니라 새로운 영역에 할당

 

==>  원시데이터는 수정 시,  메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장

 

 

 

참조형 값의 불변성 예시

 

 

1. array.push(5)는 원본데이터를 수정함으로써 불변성을 지켜주지 않은 것이 되고,

2 . array = [1, 2, 3, 4] 는 새로운 배열 [a, b, c, d]을 할당하고 새로운 참조 값을 만들어주어 불변성을 지켜준 것이 된다.

 

==> 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경

 

 

 

React에서 불변성을 지키는 이유

 

01. 리액트의 상태 업데이트를 하는 원리

리액트에서는 상태가 변하면, 컴포넌트가 리렌더링되고 상태 값을 업데이트 할 때 얕은 비교를 수행

즉, 객체의 속성 하나하나를 비교하는 게 아니라 참조 값만 비교하여 상태 변화를 감지

따라서, object나 array의 속상이나 값을 바꾸는 불변성이 없는 변경을 상태가 바뀌었다고 리액트에서 파악을 못하기 때문에

이런 불변성을 지키는 업데이트가 필요

     --> 그러므로 배열이나 객체를 새로 생성해서 새로운 참조 값을 만들어서 상태를 업데이트

 

 

02. 사이드 이펙트 방지

 1. 외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있다.

 2. 다시 반대로 생각해보면 외부의 값을 함부로 변경할 수 있는 것은 위험한 일이다.

만약 다른 어떤 곳에서 원본데이터를 사용하고 있다고 하면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있기 때문

 

 

 

 

 

---