[React] state를 변경 할 때 spread 문법을 이용하는 이유 (공부내용 정리) (원시값 개념)

const reducer = (state, action) => { //state는 이전 상태 , action은 dispatch에서 만든 array
  switch (action.type) {
    case 'CHANGE_INPUT':
      return {
        ...state, 
        inputs: { 
          ...state.inputs,
          [action.name]: action.value
        } //reducer 함수에서 새로운 상태를 만들 때에는
        //불변성을 지켜주어야 하기 때문에 위 형태와 같이 spread 연산자를 사용
      }
  }
}

reducer함수에서 새로운 상태를 만들 때 spread연산자를 사용하는 이유.

 

React는 spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한 값으로 상태를 바꿔준다.

(https://velog.io/@_seeul/React-React%EC%9D%98-state%EA%B0%80-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0)

 

이는 리액트에서 불변성을 지켜야 하는 이유와 관련이 깊다.

 

리액트가 화면을 업데이트 하는 과정

 

• setState 호출 (혹은 부모로부터 props를 전달 받는다.)

1. shouldComponentUpdate를 실행했는데 fasle를 리턴하면 여기서 멈추고, true를 리턴하면 다음 단계로 이동.
2. 가상 DOM과 실제 DOM을 비교해서 변경사항이 있으면 화면을 다시 그린다.
   여기서 shouldComponentUpdate는?

• 각각의 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있고 이것은 state가 변경되거나 부모 컴포넌트로부터 새로운 props를 전달받을 때 실행됩니다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라서 re-render를 할지에 대한 여부를 결정하게 됩니다.
• 기본적으로 shouldComponentUpdate 메소드는 true를 반환합니다. 하지만 React 개발자는 re-render를 원하지 않는 경우에, 이 return value를 false로 오버라이드 할 수 있습니다.
  
  
  

 

(https://velog.io/@_seeul/React-React%EC%9D%98-state%EA%B0%80-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 인용)

 

내가 이해한 내용 >>

 

위에서 React는 가상DOM과 실제 DOM을 비교해서 변경사항이 있다면 리렌더링 해주는데,

만약 state를 변경 불가능한 원시값이 아닌 변경 가능한 객체타입의 값으로 변경 한다면

React가 변경되었다는 것을 감지 하지 못하므로 state를 업데이트하지 못한다. 

 

 

state는 변경 불가능한 원시값으로 만들어야 한다.

 

state를 변경할 때는

spread 문법을 이용해 얕은 복사 후

새로운 메모리 공간에 저장, 새로운 값이 됨. 그것을 변수에 재할당. (자바스크립트 딥다이브 146p)

 

React가 state가 변경된 것을 알게 됨. 

리렌더링이 일어남

 

 

원시값이란? (자바스크립트 딥다이브 137p)

원시타입의 값, 변경불가능한 값. (반면 객체 타입의 값은 변경 가능한 값)

원시값을 변수에 할당하면 변수에는 실제값이 저장.

원시값에 변수를 재할당 하면 새로운 메모리공간을 확보하고 재할당한 원시값을 저장,

변수는 새롭게 재할당한 원시값을 가리킴.