React 18에서 무엇이 바뀌었나요?

by

업데이트된 기능

1. 동시 렌더링

2. 자동 배치

  • 이 함수는 setState() 및 useSate()와 같은 그룹으로 상태 업데이트를 제공합니다.

    (이전에는 각 업데이트가 개별적으로 렌더링되었습니다.
    )
// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !
f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !
f);
  // React will only re-render once at the end (that's batching!
)
}, 1000);

3. 서스펜스

'추천 관련글,
  • 컴포넌트에 필요한 데이터가 로드되는 동안 대기할 수 있는 기능입니다.

    이제 if/else 문 대신 이 함수로 로딩을 처리할 수 있습니다.

    자세한 내용 https://youtu.be/7mkQi0TlJQo

4. 서버 구성요소


새로 추가된 후크

1. 사용 아이디

  • 클라이언트 및 서버 측에서 고유 ID를 생성하는 동안 일관되지 않은 수화를 방지하는 기능을 제공합니다.
  • 고유 ID가 필요한 API를 사용하는 구성 요소에 유용합니다.

2. 전환 사용

  • 상태를 업데이트할 때 우선 순위를 지정할 수 있는 기능을 제공합니다.

3. 지연 값 사용

  • 긴급하지 않은 부분의 재렌더링을 지연시키는 기능을 제공합니다.

4. SyncExternalStore 사용

원천

https://github.com/facebook/react/releases

https://react.dev/blog/2022/03/29/react-v18