React18에서 업데이트된 기능

 React18에서 업데이트된 기능

1) 자동 배치

이전 버전: setState()를 여러 번 호출하면 해당 컴포넌트가 매번 리렌더링 되었다

React v.18 : setState() 호출을 자동으로 배치하여 렌더링이 한 번만 실행되도록 처리하여 불필요한 렌더링을 방지하여 성능을 개선

 

2) 서스펜스 지원

이전 버전 : 데이터 가져오기 등의 비동기 작업에서만 사용되었다.

React v.18 : 서스펜스가 렌더링 지연 및 코드 스플리팅에도 사용될 수 있도록 개선된다. 렌더링이 지연되는 동안 렌더링 대기 시간에 대한 UI를 표시할 수 있게 해주는 유연성을 높인다.

 

3) 이벤트 처리 개선

이전버전 : 이벤트 처리를 위해 SyntheticEvent 객체를 사용했다.

React v.18 : 브라우저의 원래 이벤트 객체를 직접 사용할 수 있도록 변경된다. 브라우저에서 발생하는 이벤트 처리를 빠르고 정확하게 처리할 수 있도록 해준다

 

4) 서버 사이드 렌더링

이전버전 : 서버 사이드 렌더링에서 초기 렌더링 속도가 느렸다

React v.18 : 성능이 개선되어 초기 렌더링 속도가 빨라지고, 페이지 로딩 시간이 더욱 단축된다.

 

 

3. React18에서 추가된 hook들

1) useId

고유한 ID값을 생성하는 데 사용된다. 애플리케이션에서 ID를 사용해야 하는 경우에 쓰인다.

import { useId } from 'react';

function Component() {
  const uniqueId = useId();
  
  return (
    <div id={uniqueId}>
      ...
    </div>
  );
}

useId hook을 사용하여 고유한 ID값을 생성하고, 이를 div 요소 id 속성에 할당합니다. 이렇게 생성된 ID는 일관성 있고 고유하며, 웹 애플리케이션에서 유용하게 사용될 수 있다.

 

2) useTransition

사용자 경험을 향상하기 위해 인터랙션 중에 발생하는 UI를 부드럽게 처리할 수 있으며 사용자 경험을 향상시킬 수 있다.

 

3) useDeferredValue

사용자 인터랙션에 대한 반응성을 향상시키기 위해 사용된다. 인터랙션에 대한 결과를 반환하는 컴포넌트를 만들 때, 이전 렌더링 결과를 사용할 수 있도록 하는 데 사용된다.

 

사용자 인터랙션에 대한 결과를 반환할 때 즉시 변경되는 것이 아닌 부드럽게 변경되도록 처리할 수 있다.

 

4) useSyncExternalStore

React 컴포넌트와 외부 데이터 소스 간의 상태를 동기화하기 위한 훅이다. React의 상태와 외부 데이터 소스 간의 동기화를 자동으로 처리해 주기 때문에, 코드를 간결하고 직관적으로 유지가 가능하다.

 

import { useSyncExternalStore } from 'react-external-store';

function App() {
  const { data, loading, error } = useSyncExternalStore('/api/data');

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <p>Data: {data}</p>;
}

외부 데이터 소스에서 데이터를 가져오고 있으며 첫 번째 인수로 데이터 가져올 URL을 전달하며, data, loading, error 객체를 반환한다. 이 객체는 외부 데이터 소스에서 가져온 데이터, 데이터를 가져오는 중인지를 나타내는 loading, error 상태를 포함한다.

 

React 컴포넌트와 외부 데이터 소스 간의 상태를 동기화할 때 코드를 간결화하고 직관적으로 유지가 가능하다. 조금 더 코드 유지 보수성을 높이고, 개발자 생산성 향상이 가능하다.

 

5) useInsertionEffect

컴포넌트가 DOM에 삽입될 때 호출되는 효과 함수를 만들 때 사용된다. useEffect와 유사하지만 컴포넌트가 DOM에 삽입될 때만 호출된다.

import { useInsertionEffect } from 'react';

function App() {
  useInsertionEffect(() => {
    console.log('Component inserted into DOM');
  });

  return <p>Hello World</p>;
}

컴포넌트가 DOM에 삽입될 때만 호출되므로, 이전 렌더링 결과에서는 호출되지 않는다. 그러므로 컴포넌트가 DOM에 직접 삽입이 될 때 호출되는 효과 함수를 간편하게 작성할 수 있다. DOM에 삽입되는 시점에 필요한 초기화 작업을 수행하는데 유용하다.