useState

useState가 무엇인지는 알지만, 동작원리에 대해서 좀더 깊게 고촬해봤다

useState구조

useState는 보통 아래처럼 구조분해(distrcuturing) 형식으로 선언한다. 이는 아래 예시처럼 두개의 쌍 형태로 state(==fruit), setState(==setFruit)형식으로 선언해준다고 생각하면된다

  const [fruit, setFruit] = useState('banana');
  
  var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
  var fruit = fruitStateVariable[0]; // 첫 번째 아이템
  var setFruit = fruitStateVariable[1]; // 두 번째 아이템
  
  

useState특징

1. setState시 해당 state가 들어간 컴포넌트는 렌더링이 된다
2. 렌더링 전,후 상태값의 불변성이 유지가 된다

const [state, setState] = useState('');

state = "current"
prevState === currentState //true

setState('current')
prevState === currentState //false