짧게 알아보는 React 19 버전

React를 주로 사용하는 개발자로서 React 19 버전에서 새로 추가되는 내용과 수정되는 내용은 뭔지 간단히 알아보는 시간을 가지겠습니다.

 

⭐️ Compiler(컴파일러)

첫번째 중요한 사실은 React에 Compiler를 추가한다는 사실입니다. 

다른 프레임워크인 Astro나 Svelte는 컴파일 단계가 있어 많은 일들을 개발자 대신 해주지만 React는 컴파일 하는 스텝 없이 오직 브라우저에서 실행되어 추가적인 성능을 위해서 더 많은 코드를 작성해야 했죠.

예를 들어서 useMemo, memo, useCallback 같은 hook들 말이죠

하지만 React 19 에서는 compiler가 추가되어 자동적으로 memorization을 제공합니다. 따라서 19버전에서는 이러한 성가신 hook들을 더이상 사용하지 않아도 되며, 개발자가 memorization이 필요한 곳을 놓치는 곳도 찾아서 자동적으로 memorization해주기 때문에 더 빠르게 동작할 수 있습니다.

제가 React 19 중에서 가장 기대하는 부분인데요. 개발할 때마다 불필요한 리렌더를 찾고 고치는데 고생했었는데 이제 그럴 필요가 없어질 것 같습니다.

 

⭐️ "use client" & "use server"

nextjs에서 흔히 보던 방식입니다. 코드가 서버에서 실행되고 있는지 혹은 클라이언트에서 실행되고 있는지 구별하기 위해 nextjs 내부 파일 상단에 적어 놓는 것이죠. 지금은 nextjs 에서만 사용할 수 있지만 앞으로 나올 React 19 에서도 사용 가능하게 된다고 합니다. 

앞으로는 nextjs 같은 프레임워크 뿐만 아니라 앞으로 개발될 다양한 프레임워크에서 사용될 것으로 생각됩니다.

 

⭐️ MetaData

앞으로는 title , meta, link 태그를 컴포넌트 트리안에서 아무곳에 적어도 바로 작동하게 된다고 합니다. 또한 SSR이나 CSR 등 모든 환경에서 제공된다고 합니다. react에서 SEO(검색 엔진 최적화)를 편하게 하려면 react helmet 이나 다른 라이브러리가 필요했었지만 앞으로는 편하게 SEO 작업이 가능할 것 같습니다.

 

⭐️ forwardRef

컴포넌트에 ref를 전달하기 위해 사용했던 forwardRef가 이제 사라진다고 합니다. 이제 모든 구성요소에 자동적으로 ref가 전달 된다고 합니다.

 

⭐️ use

서버 컴포넌트는 async를 사용하여 비동기 처리를 할 수 있는데 반해 클라이언트 컴포넌트에서 비동기 처리를 위해서는 useEffect에서 비동기 함수를 선언하고 실행하는, 무엇인가 부자연스러운 형태로 처리를 해야했습니다.

function ClientComponent() {
  useEffect(() => {
    async function somethingAsync() {
      await something('...')
    }

    somethingAsync()
  }, [])

  return <>...</>
}

이번 React 19에서는 "use"라는 새로운 훅이 등장했습니다.

use는 await 과 비슷한 개념이라고 할 수 있습니다. async 함수안에서만 await를 사용하듯이 use는 리액트 컴포넌트와 훅 내부에서만 사용할 수 있는 훅입니다.

use는 특이하게도 조건부로 호출할 수 있습니다. 조건부로 호출할 수 있는 이유는 다른 훅들과 달리 상태를 추적할 필요가 없기 때문입니다. useState를 비롯한 다른 훅들은 이전 상태와 연관지을 수 있도록 조건부로 실행되는 일 없이 실행되어야 하지만, use는 컴포넌트를 일단 렌더링 한뒤에는 데이터를 저장할 필요가 없기 때문입니다. 

use를 사용하면 비동기 식으로 로드할 수 있게 됩니다. Promise 뿐만 아니라 Context라 던지 모든 데이터 타입도 지원합니다.

 

 

참고 자료

리액트의 신규 훅, "use"

https://www.youtube.com/watch?v=v07gXY6ESEo&t=318s