불변성 (Immutability)

선언한 객체(데이터)가 선언 이후 변하지 않도록 관리

• 선언한 객체를 선언 이후에 수정하면 불변성을 위반한 것이다.

• 자바스크립트의 원시 타입 불변성은 메모리 영역에서 값을 변경할 수 없다는 의미를 지닌다.

• 만약 값이 바뀌어야 한다면 새로운 값을 다시 만든다.

• 객체는 참조(reference) 형태로 값을 받기 때문에 새로운 값을 다시 만들 필요없이 직접 변경이 가능하다.

React의 상태 관리

function App(){
  const [person, setPerson] = useState({
    name : 'HeeYun',
    age : 25
  });
  
  const onClick = () => {
    setPerson({
      ...person,
      age : 35
    });
  }
 }

• 위의 코드에서 함수 onClick이 발생해서 setPerson이 실행되면 person의 데이터가 바뀌는 것이 아니라 새로운 객체를 만들어서 관리하게 된다.

• 왜냐하면, React는 현재와 지금의 상태를 비교하면서 어떻게 DOM을 렌더링할 지 결정한다. 만약 데이터가 같다면 리액트는 DOM을 어떻게 렌더링할 지 모르게 된다.

• 불변성이 지켜져서 새로운 객체가 나왔을 경우에, 기존의 객체와 참조하는 주소값 자체가 다르므로 현재와 이전의 상태를 비교하기 쉽다.

Vue의 상태 관리

• Vue는 data로 관리되는 객체의 속성을 직접적으로 변경하는 것을 허용한다.

• Vue는 data로 객체를 관리 할 때 모든 내부 속성에 대해서 getter/setter를 달아두는 데, 이 getter/setter의 역할은 데이터의 변경이 일어날 때 Vue에 알리는 기능을 한다.

• 따라서, state에 새로운 객체를 추가하면, Vue는 모든 상태를 모니터링해서 변경이 일어날 때마다 자동으로 DOM을 다시 렌더링 한다.