실무에서 사용할 수 있을 것 같은 React 19 주요 기능 정리

React 19가 정식으로 출시된지 꽤 되었지만, 나는 아직도 18에 머물러있거나 ..

혹은 오히려 그 이후의 기능에 머물러 있는것만 같은 느낌이 들어서 이번 기회에 React 19 주요 기능을 살펴보고 실무에서 어떻게 사용하거나 하면 좋은지 정리해보려고 한다.

 

이게 약간 쭉 훑어보니까, React 19는 성능 최적화에 칼을 간 느낌이었다.

이제 useCallback, useMemo 안 써도 돼요. (정말?)

정말 재밌었던 점은, 성능 최적화로 우리가 너무 당연하게도 생각하는 useCallback, useMemo, memo 와 같은 API는 이제 React 19에서는 컴파일러 기능 덕분에 그냥 작성을 해도 성능 최적화가 된다고 한다.

뭐.. 하지만 아직은 시기상조라는 느낌이 있긴하다. 물론 우리가 useCallback 등 이런 관련 없이 컴파일러만으로 의존하기에는 기존 레거시 코드들 이런것들에 대한 개념은 물론 알고는 있어야 한다.

이와 관련해 좋은 번역글 링크가 있었다.
https://velog.io/@eunbinn/react-compiler-soon

[번역] 리액트 컴파일러와 리액트 19 - 이제 메모이제이션을 신경쓰지 않아도 되나요?

 

 

 

우리는 useEffect, useContext를 use로 사용하기로 했어요.

 

 

이제는 use라는 간단한 훅을 사용하여서 비동기 데이터를 페칭하거나 context를 비동기로 불러올 수 있다고 한다.

원래는 useEffect를 사용해서 아래 코드처럼 구현했지만 

useEffect(() => {
// async data fetch
fetchPerson().then((data) => setPerson(data));
}, []);

 

const person = use(fetchPerson());

이렇게

 

이렇게만 해도 useEffect와 동일한 역할로 요청이 처리되고 로딩 상태 같은거는 Suspense를 사용하여 관리해줄 수 있다.

 

 

useContext 도 그냥 use(UserContext) 와 같이 가장 가까운 Context를 찾아서 참조하며 사용하면 된다.

 

import React, { createContext, use } from 'react';

// Create UserContext with a default value
const UserContext = createContext<string>('');

// User component to consume context value
function User() {
const user = use(UserContext); // replace useContext with use()
return <h1>Hello, {user}!</h1>;
}

 

이렇게 use(Context)로 컨텍스트를 참조받으면 가장 가까운 UserContext가 모듈 최상단에 있으니까 이걸 참조받아서 가져오는거다.

 

 

 

이건 언젠간 사용할 것 같은 useOptimistic

 

 

계속 정보를 써치하다보니, 정작 내가 실무에서 좀 눈여겨서 사용할 것 같은건 useOptimistic 훅이었는데,

 

useOptimistic 훅은, 실시간 애플리케이션 또는 좋아요같은 UI 업데이트를 하는데 유용하다고 한다.

즉 낙관적 UI 업데이트를 잘 구축할 수 있다는 뜻이다.

사용자 인터페이스에서 비동기작업을 기다리지 않고 예상 결과를 미리 보여주고, 사용자 경험을 더욱 부드럽고 즉각적으로 처리할 수 있다.

 

이 개념은 언젠가 무조건 사용할 것 같다. 실무에서는 비동기 데이터 작업이 기다릴 때 동안 보통, 로딩 처리를 하거나 그런 낙관적 업데이트를 해준다고 생각을 해도 복잡성도 높아지기도 하고 확실하게 음.. 데이터 작업이 진행되지도 않았는데 미리 처리를 해놓고 만약에 데이터 작업이 실패하면 변경하는 작업 등등 고려 사항이 많았다고 생각했는데 useOptimistic을 사용하면 좀 더 로직적으로 설계가 쉬워보였다.

import React, { useState, useOptimistic } from 'react';

async function createMessage(message) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(message), 1000);
  });
}

function ChatApp() {
  const [messages, setMessages] = useState([]);

  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { text: newMessage, sending: true }]
  );

  async function formAction(formData) {
    const message = formData.get('message');
    addOptimisticMessage(message); // optimistic update
    const createdMessage = await createMessage(message); // server update
    setMessages((messages) => [...messages, { text: createdMessage }]); // state update
  }

  // ...
}

export default ChatApp;

 

실제 코드만 봐도 너무 명확해서 너무 좋다. 메시지 낙관적 처리를 하고, 서버 업데이트하고 그 후 상태변경. 그냥 코드 몇줄로 너무 깔끔

 

 

이렇게 간략하게 react 19의 주요 기능. 실무에서 정말 좀 편하게? 사용할 수 있을 느낌의 주요 기능만 따로 추려보았는데

확실히 성능 최적화 관점에서 많이 이루어진 업데이트 같다는 것을 느끼게 되었다. 

제일 흥미로웠던건 이제 useMemo 안 써도 자동으로 컴포넌트 재계산이 방지가 될까 이런 부분이 흥미로웠고

근데 또 역설적인건 아니, 모든것을 메모해버리는걸까? 그래도 되나? 라는 생각도 들었고..
뭔가 이래저래 아직은 useMemo를 버리기에는 개발자가 코드를 관리하고 제어를 명확히 해줘야한다는 생각 때문에 적응이 필요한 부분 같다는 생각이 들었다.

 

반면에 정말 낙관적 UI 관련해서는 너무 깔끔하게 떨어지고 명확해서 너무 좋았다.