useState
- useState는 컴포넌트에서 State 값을 추가할 때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 State를 사용할 수 없기때문에, Hook을 사용해서 State와 같은 기능을 수행할 수 있도록 만들어주었다.
- 하나의 useState 함수는 하나의 상태 값만 관리할 수 있어 만약 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용해야 한다.
state 변경 시, setState를 쓰는 이유
- State는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체이다
- 직접 State를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고, setState를 호출하여 State가 변경되면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행한다.
- setState를 호출하면 기존의 State와 setState로 설정된 값을 비교하여 값이 변경되었으면 render 함수를 호출한다.
setState의 동작
- setState는 비동기적으로 동작한다
- 변경된 값들을 모아서 한번에 업데이트를 진행하여 렌더링을 줄이고자 배치(Batch) 기능을 사용해 비동기로 작동한다
- 배치 업데이트 주기 : 16ms
setState 동기적으로 처리하기
- setState에 updater 함수를 사용해 이전 State의 값(prevState)을 참조 가능하도록 함
- updater 함수 : state와 props를 인자로 받는 state를 변화시키는 함수
- setState((state, props) ⇒ {…})에서 state와 props는 최신 상태로 보장된다.
setState로 state 변화가 완료된 이후 로직이 실행되도록 하는 방법
- setState에는 await 키워드를 사용할 수 없다
- useEffect의 의존성 배열에 state를 넣고 useEffect 안에서 callback 로직 구현
- setState가 동작한 이후에, callback 로직이 실행된다.
- state 변화 이후 꼭 callback으로 로직을 구현해야하는지 생각해보기