리액트를 다루는 기술을 참고하여 기술하였습니다.
리액트의 불변성이란?
리액트는 불변성을 지켜야 한다.
그렇다면 이 불변성이란 무슨뜻일까?
우선 불변성의 사전적 정의는 변하지 않는 성질이다.
불변성을 이해하기 위해서는 참조형광 원시형에 대하여 이해를 해야한다.
참조형과 원시형
원시형 call by value
원시형의 데이터 타입은 boolean, string, number, null 등이 있다.
원시형은 직접적으로 메모리에 값이 입력되는것을 의미한다.
참조형 call by reference
참조형은 배열과 객체 같은 데이터 타입이 존재한다.
참조형의 경우에는 직접적으로 메모리 값이 올라가는것이 아닌 메모리에 참조되는 주소가 입력이 된다.
그렇다면 다시 돌아와서 불변성이란 결국 무엇을 뜻하는 것일까?
바로 데이터가 메모리상에 올라갔을때, 메모리상에서 변경이 되는가 안되는가 하는 문제다.
즉 불변성이란 다음과 같다.
그렇다면 왜 이러한 불변성을 리액트에서는 지켜줘야 하는가? 에 대한 의문이 여전히 남아있다.
이것에 대한 대답은 다음과 같다.
불변성을 지켜줘야하는 이유
- 효과적인 업데이트
- 사이드 이팩트 방지
효과적인 업데이트
리액트는 뷰 만을 신경쓰는 방식으로 제작되어진 라이브러리이며, 돔트리를 통해서 데이터를 저장하는데, 랜더링이 될때마다, 돔트리를 확인하고, 여기에서 변경된 값만을 확인하는 virtual DOM이라는 방식을 사용하고 있다.
여기에서 중요한 점은 이 virtual DOM이라는 방식이, 얕은 비교만 수행한다는 점이다.
얕은 비교란, 일일히 객체 프로퍼티를 확인하는것이 아닌, 참조하는 참조값만을 확인한다는 것이다.
따라서 이를 통해 계산을 일일히 비교 대조할것에서 참조값만을 비교해주는 것으로 연산이 대폭 줄수 있다.
사이드 이팩트 방지
사이드 이팩트란, a에서 뭔가 바꿧을때 예상하지 못한 b라는 효과를 사이드 이팩트라고 한다.
이러한 사이드 이팩트는 코딩에서 상당히 불편한 점인데, 예상치 못한 오류가 발생할수도 있기 때문이다.
하지만 리액트에서는 불변성을 지켜주고, 사본을 통해서 원본 값을 변경하지 않고, 데이터를 변경하기 때문에 이러한 예상치 못한 오류를 방지하고 있다.
그렇다면 useEffect는?
이렇게 사이드 이팩트에 대해서 생각을 하게 되면, 자연스럽게 useEffect라는것에 대해서 의문점이 생긴다.
useEffect는 특정 작업을 할때마다 side effect를 만드는 작업이잖아요??????????
이게 좀 리액트의 이상한 점이긴 한데, 이렇게 useEffect를 만드는것은, 어쩌피 개발자들은 대규모 프로젝트를 할경우, 개발의 실행상태를 예측하기 어려우며 따라서 사이드 이팩트를 예측하는것도 불가능하다.
따라서 리액트에서는 이것을 useEffect라는 함수를 통해서 side effect와 함수를 분리하여, 차라리 사이드 이팩트를 효율적으로 처리하고 함수를 좀더 간략하게 만들수 있게 도와주는 방식을 채택한 것이다.
따라서 이렇게 useEffect라는것은 함수의 최적화를 도와준다 라고 할수 있는 것이다.
Uploaded by N2T