리액트의 동작 원리 및 불변성

 

리액트의 동작 원리

리액트는 state, view, action 으로 구성됩니다.

리액트는 현재 state 를 기준으로 UI 를 렌더링합니다.

특정 이벤트로 인해서 action 이 발생하여 state 가 변경되면 

UI 는 리랜더링 되어서 변경된 state 를 기준으로 새로운 view 를 보여줍니다.

 

React 는 어떻게 state 가 변경되었다는걸 알아낼까요?

이전 state 와 변경 후의 state 를 빠르게 비교하는게 성능상의 이점을 가져옵니다.

그래서 React 는 Obejct.is(prevState, newState) 를 활용하여 state 의 변경상태를 알아냅니다.

이것이 React 에서 불변성이 중요한 이유입니다.

 

예를들어 

{ number : 13, age : 24} 라는 state 가 있다고 가정해봅시다.

예를 들어 Click 이벤트가 발생하면 number 의 값을 1 씩 증가하는 로직을 설계한다고 가정합니다.

 

state.number += 1

setState(state)  

이런식으로 코드를 짜게되면 state 의 number 는 14로 변경되었지만, 리랜더가 일어나지 않습니다.

왜냐하면 기존에 존재했던 {number: 13, age:24} 라는 state 와 우리가 변경한 {number: 14, age:24} 라는 state 가

본질적으로 같은 Object 이기 때문에 Obejct.is(prevState, newState) 가 True 가 됩니다.

즉 Obejct.is(prevState, newState) 가 True 일때 리액트는 state 가 업데이트 되었다고 판단하지않습니다.

 

따라서 state 를 업데이트하는걸 리액트가 인식하게 하기 위해서는 불변성을 지키는게 중요합니다.

 

setState({...state, number: state.number + 1}) 이런식으로 말이죠.

이 코드는 기존에 존재하는 state 의 값을 변경시키지 않고(불변성 유지), 새로운 state 를 할당함으로서, 

Obejct.is(prevState, newState) 는 false 가 되게 됩니다.

즉, React 는 state 의 변경을 알아차릴 수 있게되고, 이로서 리랜더링이 진행되는 것입니다.