React 19
React 공식 문서 - 19v 릴리즈
또 이렇게 리액트의 새로운 버전이 릴리즈 되었습니다!!!

새로 릴리즈 된 Next.js 15도 React 19 를 반영하며 나왔어요!
Next.js 15 공식 문서

많다면 많고 적다면 적은 변화들이 있었는데요!!

일단 제일 신나는? 저한테는 반가웠던 use에 대해 먼저 이야기해 보고 싶어요!

use 정식 출시

React 공식 문서 - Suspense
React 공식 문서 - use

사실 <Suspense /> 나와서
사용자에게 임시 화면을 보여줘서 좋긴 했는데,

솔직히 사용하는데 제약이 많았잖아요...
거의 lazy로 받은 컴포넌트만 Suspense에 사용할 수 있는 느낌

하지만 계속 실험실에 있던 use가 드디어 바깥세상에 나와
Suspense를 드디어 제대로 편하게 사용할 수 있게 되었어요.

이제는 lazy로 묶지 않고
Promise(context도 가능)를 반환하는 함수를 use()안에 넣으면
완료될 때까지 Suspense의 fallback이 보여진답니다! 🥹

너무 편해지지 않았나요!!!

주의 사항

• 컴포넌트나 훅 안에서만 사용 가능
• 서버 컴포넌트 안에서는 use 대신 async/await을 쓰기 (서버 컴포넌트 안에서 쓸 일이 있을까...?)
  - 이유는 서버 컴포넌트는 async/await가 호출된 지점부터 렌더링을 이어가지만, use 는 데이터가 받아진 후 컴포넌트가 리렌더링 하기 때문
• Promise들은 서버 컴포넌트에서 웬만하면 생성해서 클라이언트 컴포넌트한테 넘겨주기.(클라이언트에서 만들어진 Promise는 리렌더링(re-render) 시에 언제나 새로 만들어짐.)

import { use, Suspense } from "react";

function RecipeList({ listPromise }) {
  const recipes = use(listPromise);
  return (<ul>
    {recipes.map((item) => (<li>{item}</li>)}
  </ul>);
}

export function RecipeListContainer({ listPromise }) {
  return (
    <Suspense fallback={<p>Loading delicious recipes 🍕...</p>}>
      <RecipeList listPromise={listPromise} />
    </Suspense>
  );
}

다른 사항들

ref as a prop

이제는 forwardRef 필요 없음!

StrictMode 변경 사항

useMemo 와 useCallback 는 이제 1번째 렌더에서 저장된 결과 값을 1번째 렌더에서 사용

Improvements to Suspense

이전에는, 한 컴포넌트가 서스펜드(suspended)되면 옆의 컴포넌트들이 렌더링 되고 폴백(fallback)이 진행됐었어요.

하지만 이제는 바로 폴백(fallback)이 진행되고 옆의 컴포넌트로 넘어간답니다.

useRef 

모두 immutable Ref 한 번씩 고생한 적 있으시죠?!

타입스크립트를 사용하는 리액트 프로젝트의 경우에서 문제가 되었었죠.
useRef<HTMLInputElement|null>(null) 처럼 null을 넣으면 RefObject 을 반환해서 immutable이 되어 변경할 수 없었죠.

아무것도 안 넣거나 undefined를 넣었을 때는 MutableRefObject 를 반환했기 때문에 괜찮았죠.

이제는 2개 구분할 필요도 없이
RefObject 타입만 존재합니다!!!

interface RefObject<T> {  
	current: T  
}  


declare function useRef<T>: RefObject<T>

• 하지만, 무조건 인수 필수로 변경
• 모든 ref는 변경 가능(mutable)

ReactElement TypeScript type

• unknown 으로 변경 (예전 any 이였음)

Support for Document Metadata 

공식문서

원래 react-helmet 같은 라이브러리를 사용해서 메타 데이터를 변경했었는데요. 이제는 필요 없어졌어요!

바로 적용 가능하답니다.
어느 곳에서나.

• 비슷한 맥락으로 link도 아무 곳에서나 추가 가능해요.

변경 사항들을 보면 정말 개발의 자유도가 높아진 느낌인데
관심사끼리 묶을 수 있어 좋기도 한데
코드 유지가 더 어려워지지 않을까 하는 생각도 많이 들더라구요... 컨벤션이 더더욱 필요해질 것 같기도 해요.
1 곳에 모든 걸 넣는 느낌이랄까
css in js가 나왔을 때부터 막을 수 없는 흐름이 되어버린 걸까요...?

좋기도 하면서 이후의 코드들이 무서워진 리액트 19 후기였습니다!