[React] React가 불변성을 지키는 이유

React가 불변성을 지키는 이유

React가 불변성을 지키는 이유는 부모컴포넌트가 re-rendering 되거나

state,props가 변화될 때 렌더링이 일어나게 된다.

 

근데 렌더링을 할지 말지 판단하기 위해 state가 변화되는지를 판단한다.

그 과정에서 state 객체 내의 모든 value를 다 깊은 비교하면 당연하게도 효율적이지 않다.

그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성의 유지가 중요하다.

 

state를 직접 변경하게 되면 value 값은 바뀌지만 참조 값은 바뀌지 않으므로 렌더링이 일어나지 않는다.

mutable한 상태를 사용하게 되면 리액트 돔이 제대로 된 추적을 할 수 없을 것이고,

예기치 않은 사이드 이펙트를 발생시킬 수 있다.

어떻게 불변성을 지킬까?

스프레드 문법, map, filter, slice, reduce 와 같은 새로운 배열을 반환하는 메소드들을 활용한다.

 

setState를 이용할 때 원시타입 경우에는 값을 바로 넣어주어도 되지만

참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다. 

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

// 참조타입
const [cellPhone, setCellPhone] = useState({ type: 'iphone', series : "12pro" })
setState({...cellPhone, series: '13'})