리액트 - v18

1. 컴포넌트 트리의 변경(자동 batch를 위해서)

ReactDOM.render -> ReactDOM.createRoot

 

코딩애플님 유튜브에서 잘라왔는데, 이 부분은 정말 엄청 큰 매리트가 있어 보입니다.

 

2.  새로운 훅

useId - Dom을 위한 유니크 id를 만들어주는 훅

-> 어디에 쓸까 생각을 해봤는데, 유니크id가 항상  필요한 map함수내의 key값에 줘도 되겠다 라는 생각이 듭니다.

function Checkbox() {
 // 이 id를 가진친구들은 유니크 아이디가 생긴다
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input id={id} type="checkbox" name="react" />
    </>
  );
}

 

useTransition - 느린 컴포넌트 성능 향상 

isLoading에는 startTransition이 처리중일때는 true입니다.

function App() {
  const [isLoading, startTransition] = useTransition();
  return (
    <>
	{startTransition(성능저하를 일으키는곳)}
    </>
  );
}

 

useDeferredValue - 느린 컴포넌트 성능 향상 

function App() {
  const [count, setCount] = useState();
  const state = useDeferredValue(count);
  return (
    <>
    </>
  );
}

 

useTransition  vs useTransition

Transition는 우선 순위를 정해줌
defferredValue는 데이터 전달을 지연시킴

 

3. Suspense 컴포넌트

-> 데이터를 서버에서 가져와서 렌더링할때 좋은 기능으로 보입니다.

React 17에서 전체 컴포넌트 트리 중 일부가 나머지 부분보다 느리다면, 
SSR의 전체 성능은 급격하게 낮아지게 됩니다.
* 각 단계마다 그 느린 부분에서 병목 현상이 발생하기 때문

React 18에서는 Suspense를 사용하여 앱을 더 작은 독립적인 유닛으로 만들 수 있습니다.
이를 통해 앱의 나머지 부분의 렌더링을 방해하지 않게 할 수 있습니다.

 

아래와 같은 코드가 있다고 가정할때, 각자 다른 데이터를 가져올려면 데이터 하나하나당 로딩 status를 처리해줍니다.

 

하지만 Suspense 컴포넌트를 사용하면 Suspense가 트리를 타고 내려가서(하위컴포넌트로 가서)

하위컴포넌트가 아직 데이터를 준비하지 못했으면, 상위 컴포넌트에게 아직 준비가 안됬어! 라고 알려주고,

모든 컴포넌트들의 데이터가 준비되면 그때 데이터를 로드해줍니다.

fallback 이라는 prop을 이용해서 상태메세지를 전달할 수 도 있고,

div 태그가 들어가듯이, 물론 컴포넌트로 Loading을 만들어서 줄 수도 있습니다.

원래는 Loading을 각 컴포넌트 안에서 띄워줬어야했지만,

이렇게하면 데이터를 받아오고 상태처리를 해주는게 훨씬 좋아집니다.