useState?
class형 컴포넌트에서만 조작할 수 있었던 state를 함수형 컴포넌트에서 조작할 수 있게 만든 Hook.
어떻게 리렌더링이 되어도 값이 그대로 일까 ?
JavaScript의 Closure 특성을 이용하는데, 이는 내부함수에서 외부함수의 변수를 참조하는 경우, 함수가 다시 실행되어도 변수가 죽지 않고 살아남는 특성이다. ( 라고 이해했다. )
const를 써야 하는 이유
const는 재할당이 불가능한데 왜 const로 선언하는 걸까?
setstate를 이용하면 state의 값이 재할당되는 원리가 아니라 리렌더링이 되어 새로 컴포넌트를 만들고 새로 변수를 만들지만 변수의 값은 클로저의 특성으로 인해 최신의 값을 사용하기때문, let이나 var을 이용하면 useState의 변수를 직접 조작해버릴 수 있는 여지를 없애고 set만을 사용해 변수를 조작하기 위함.
state값이 바로 변경 안되는 이유
가끔 버튼에 state를 연결할때 두번눌러야 state가 변경되는 경우가 있는데
setState가 비동기로 동작하기 때문.
왜 비동기로 동작하는 걸까?
값이바뀔때마다 즉각 리렌더링하면 많은 setState가 있을경우 매우 비효율적을 동작하기때문.
setState가 여러개 있을경우 단 한번만 리렌더링함.
이를 해결하려면 useEffect 의존성배열이나 setState에 함수를 넣으면된다
Hooks는 배열일뿐.
useState에서 선언된 변수들은 배열에 순서대로 저장되며
만약 조건문이나 코드 위치를 아래로 내려버린다면 렌더링 될때마다
배열의 위치 참조가 잘못되어 버그가 발생할 수 있다.
Rules of Hooks
