리액트에서 useState가 불변성을 유지하는 방법

밑의 코드는 useState 소스코드를 간소화해서 useState의 원리를 설명하는 코드입니다.

Object.assign을 이용해서 새 객체를 생성해서 state에 할당합니다.

따라서 state의 불변성을 보장합니다.

let currentState; // current state valuefunction useState(initialState) {
// set current state to the initial state if it hasn't been set yet
if (!currentState) {
  currentState = initialState;
}

function setState(newState) {
  // create a new state object by merging the current state with the new state
  currentState = Object.assign({}, currentState, newState);

  // trigger a re-render of the component
  renderComponent();
}

// return the current state value and the setState function
return [currentState, setState];