추가) React State 관리 성능개선과 Hooks

<리액트를 다루는 기술>

React - 1장 : React 이해

React - 2장 : JSX

React - 3장 : 컴포넌트

React - 4장 : 이벤트 핸들링

React - 5장 : ref. DOM에 이름 달기 

React - 6장 : 컴포넌트 반복
React - 7장 : 컴포넌트의 LifeCycle
React - 8장 : React Hooks 총정리

React - 9장 : 컴포넌트의 스타일링

React - 10장 : 빠르게 TODO앱 실습

React - 11장 : 컴포넌트 성능 최적화

React - 12장 :  immer를 사용하여 더 쉽게 불변성 유지하기

React - 13장 : 리액트 라우터로 SPA 개발하기

React - 14장 : 뉴스 뷰어 예제프로젝트

React - 15장 : ContextAPI

 

---

1. Automatic Batching 기능

- state변경함수를 연달아서 여러개 작성하면, 원래 재렌더링을 여러번 해야되지만, react가 자동으로 마지막에 한번만 재렌더링 하도록 최적화를 알아서 해주는 기능이다.

- 18버전부터는 ajax안에서도 일관된 Automatic batching 기능이 작동하도록 되었다.

 

1.  useTransition

let [isPending, startTransition] = useTransition()

startTransition(()=>{state변경함수(e)})

- startTransition() 함수로 성능저하가 일어나는 state변경함수를 감싸주면 된다.

- 동작원리 : startTransition 안의 함수는 조금 늦게 지연처리 해준다. (시작시점을 조금 늦게 미뤄준다)

 

- isPending은 언제쓰는가 ? 

{
  isPending ? "로딩중" :
  return <div>로딩완료</div>
}

- 이렇게 하면 startTransition이 처리중일 경우 true를 반환한다

- 끝나면 로딩완료 된다

 

2. useDeferredValue 

let state = useDeferredValue(state)

- useDeferredValue에 담긴 state는 변동 시 지연처리 해준다.

- 다시 state에 담아서 사용하기도 한다.