[React] React Hooks - useState

React Hooks

Hook은 React 버전 16.8에 새로 추가된 요소이다.

기존에는 Class 바탕의 코드로 React의 여러 기능을 사용해왔다. (상태 정의, 업데이트 등)
Class 바탕의 코드는 로직을 재사용하기 어렵고, 복잡한 컴포넌트를 이해하기 어렵고, this 바인딩 등 문제들이 있었는데 이를 해결하기 위해 Hook이라는 대체 개념이 나온 것이다.

---

useState

React는 상태(props, state)가 변경될 때 컴포넌트를 re-render 한다.
useState로 내부 상태(state)를 설정하고, 상태가 변경 될 때는 컴포넌트 함수 전체를 다시 호출하게 된다.

그럼에도 전체 DOM Tree가 업데이트 되지 않는 이유는 바로 virtual DOM 덕분이다!
component가 다시 호출되면 React는 이전의 virtual DOM과 비교해서 실제 변경된 부분을 확인하고, 그 부분만 DOM Tree에 업데이트 한다.

---

useState 호출

useState 함수를 호출하면 배열이 반환된다.

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

state는 상태를 저장할 변수이고, setState는 상태를 업데이트할 수 있는 함수이다.
state의 초기값은 intialState로 지정되고, 오직 setState를 이용해서만 값을 변경할 수 있다.

컴포넌트 내부에서 setState 함수로 state를 갱신하면 태스크 큐에 컴포넌트 리렌더링이 등록된다.
리렌더링 시에 state 값은 갱신된 최신 state 값으로 변경된다.

useState에 하나의 인자 전달

state는 함수가 동작하기 이전의 상태를 스냅샷 형태로 저장하고 있다.
따라서 컴포넌트 함수 내에서 setState를 여러번 호출해도 변경된 state 값을 사용할 수는 없다.

initialSate가 0일 경우, 다음 함수를 종료한 뒤의 state1 값은 1이 된다.

setState(state + 1);
setState(state + 1);
setState(state + 1);

useState에 함수 전달

이전 state를 사용해서 새로운 state를 계산하고 싶을 경우, setState의 인자로 콜백함수를 전달할 수 있다.
콜백함수의 첫번째 인자가 변경된 최신 state를 나타낸다!

initialState가 0일 경우, 다음 함수를 종료한 뒤 state 값은 3이 된다.

setState(prevState ⇒ prevState + 1);
setState(prevState ⇒ prevState + 1);
setState(prevState ⇒ prevState + 1);

---

React Docs - Hook 개요