[React] 19 버전의 핵심 업데이트 사항 살펴보기

[React] 19 버전의 핵심 업데이트 사항 살펴보기

📖 들어가며

현재 React 19 버전의 업데이트에 대해서 많은 관심을 가지고 있습니다.

 

여러 변경사항들이 많지만 이번 포스팅에서는 핵심 내용이라고 생각하는 부분을 포스팅하려 합니다.

 

즉, 기존에는 필요하고 사용해야 했지만 19 버전이 도입되면서 사용하지 않아도 되는 것들과 추가로 몇 가지 새로운 기능들을 소개하려고 합니다.

 

현재 2024년 5월 15일 기준으로 리액트 19버전을 사용해보고 싶다면 카나리 버전을 설치하여 사용할 수 있습니다.

npm i react@canary react-dom@canary
or
yarn add react@canary react-dom@canary

React Compoiler

19 버전의 가장 큰 부분은 리액트 컴파일러입니다.

 

리액트 컴파일러는 리액트 코드를 일반 자바스크립트 코드로 변환합니다.

 

주요 이점으로 전반적인 앱 성능을 향상 시키는 것이지만 더 좋은 점은 개발자가 성능에 대해 많은 고민을 할 필요가 줄어들었습니다.

 

기존에는 불필요한 렌더링을 줄이기 위해 메모이제이션(Memoization)을 위한 useCallback, useMemo, memo와 같은 것들을 사용해야 했습니다.

 

이 메모이제이션 자체도 남발하면 오히려 성능이 저하되어서 개발하는 입장에서 이 기준을 명확히 잡는데 고민이 필요했습니다.

 

이런 문제를 리액트 컴파일러가 자동으로 리액트 코드를 최적화하여 이런 문제로 고민할 필요가 줄어들었습니다.

 

즉 위에서 언큼한 메모이제이션을 위한 훅들을 사용하지 않아도 됩니다.

forwardRef

앞으로 forwardRef를 사용할 필요가 없어졌습니다.

// 19 이전

function App() {
  const buttonRef = useRef();

  const onButtonClick = () => console.log(buttonRef.current);

  return (
    <button ref={buttonRef} onClick={onButtonClick}>
      클릭
    </button>
  );
}

const Button = forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});

기존에는 Ref를 자식 컴포넌트에게 전달하기 위해서는 먼저 Ref를 만든 다음 받는 컴포넌트에서는 forwardRef를 감싼 후 ref props를 받을 수 있었습니다.

 

// 19 이후

function App() {
  const buttonRef = useRef();

  const onButtonClick = () => console.log(buttonRef.current);

  return (
    <button ref={buttonRef} onClick={onButtonClick}>
      클릭
    </button>
  );
}

const Button = ({ ref, ...props }) => {
  return <button ref={ref} {...props} />;
};

업데이트 이후에는 위 코드처럼 forwadRef로 감싸지 않아도 props로 ref를 전달받을 수 있게 되었습니다.

use() hook

다양한 데이터를 비동기적으로 호출할 수 있는 use() hook이 추가 되었습니다.

 

use() hoook을 사용하면 promise와 context를 쉽게 처리할 수 있습니다.

 

즉, 여러 목적으로 사용될 수 있는 hook입니다.

 

기존에 서버 데이터를 fetching 하기 위해 useEffect를 사용하고,

React context에 접근하기 위해 useContext()를 사용하는 부분을 대체할 수 있습니다.

Fetch data - useEffect()

function Person() {
  const [person, setPerson] = useState(null);

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

  if (!person) return <h1>불러오는 중...</h1>;

  return <h1>{person.name}</h1>;
}

useEffect() 내부에서 API 요청을 하고 가져온 데이터를 useState를 통해서 상태를 업데이트해줄 수 있었습니다.

또한, 로딩 및 에러 처리도 할 수 있고 마지막으로 UI를 업데이트할 수 있었죠.

Fetch data - use()

function Person() {
  const person = use(fetchPerson());

  return <h1>{person.name}</h1>;
}

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Person />
    </Suspense>
  );
}

use() hook은 데이터를 가져오는 동안 promise를 반환하는 함수에 사용될 수 있습니다.

리액트의 Suspense 컴포넌트를 사용하여 가져오는 동안의 UI를 표시하고, promise가 resolve 되면 가져온 데이터를 보여줄 수 있습니다.

Read context - useContext()

const UserContext = createContext();

function User() {
  const user = useContext(UserContext);
  return <h1>안녕 {user.name}!</h1>;
}

function App() {
  return (
    <UserContext.Provider value={{ name: "Yongveloper" }}>
      <User />
    </UserContext.Provider>
  );
}

context에 접근하기 위해서 useContext()를 사용하여 접근하려는 conetext를 생성한 후 넣어서 접근할 수 있었습니다.

또한, 접근하기 위해서는 해당 Conext Provider로 wrapping이 되어있어야 합니다.

Read context  - use()

const UserContext = createContext();

function User() {
  const user = use(UserContext);
  return <h1>안녕 {user.name}!</h1>;
}

function App() {
  return (
    <UserContext value={{ name: "Yongveloper" }}>
      <User />
    </UserContext>
  );
}

useConext() 대신에 use() hook으로 대체할 수 있습니다.

또한, Context.Provider 대신 Context를 프로바이더로서 렌더링 할 수 있습니다.

지시문(Directives)

19 버전에 지시문을 추가할 수 있게 되었습니다.

 

최근에 Next.js를 사용해 보셨다면 이미 본 적이 있을 거예요.

 

지시문은 컴포넌트 파일의 상단에 추가할 수 있는 문자열일 뿐입니다.

 

클라이언트에서 클라이언트를 통해서 리액트를 실행할 건지('use clinet'), 서버를 사용해서 리액트를 실행할 건지 알려줄 수 있습니다.('use server')

Actions

 form에 대한 처리를 쉽게 할 수 있는 아주 유용한 새로운 기능입니다.

function formAction(formData) {}

<form action={formAction}>

 

<form>, <input>, <button> 요소에 action과 formAction 프로퍼티로 함수를 전달하는 기능이 추가되었습니다.

 

리액트 19에서는 서버나 클라이언트에서 실행할 수 있습니다.

Clinet Actions

'use client';

function App() {
  function formAction(formData) {
    alert('type:' + formData.get('name'));
  }

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

클라이언트 컴포넌트에서의 사용 예제입니다.

1. 상단에 클라이언트 컴포넌트인지 알려줍니다.
2. form의 action에 action 작성하여 함수를 연결합니다.
3. formData로부터 input의 value를 가져올 수 있습니다.

useActionState()

import {useActionState} from 'react'

 

useActionState() hook은 액션 함수를 사용하여 새로운 상태를 설정할 수 있습니다.

const [state, formAction] = useActionState(action, null);

// const [state, formAction] = useActionState(fn, initialState, permalink?);

 

import { useActionState } from "react"; // not react-dom

function Form({ formAction }) {
  const [state, action, isPending] = useActionState(formAction);

  return (
    <form action={action}>
      <input type="email" name="email" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
      {state.errorMessage && <p>{state.errorMessage}</p>}
    </form>
  );
}

useActionState에서 현재 상태, 수행할 액션 함수, 처리 중 여부를 받을 수 있습니다.

 

useActionState()를 사용하여 더 편리하게 form을 처리할 수 있게 되었습니다.

useOptimistic()

작업 처리에 대해서 성공했든 아니든 사용자가 작업 결과를 기다리게 하는 것은 좋은 사용자 경험이 아닙니다.

 

이 문제를 해결하기 위해서 낙관적 업데이트를 수행할 수 있습니다.

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

 

이번 업데이트에서 useOptimistic() hook으로 편리하게 처리할 수 있게 되었습니다.

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

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

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

이렇게 하게 되면 서버의 응답을 기다리는 동안 상태에 새 메시지를 보내고 완료가 되면 임시 상태를 실제 서버에서 받아온 상태로 변경할 수 있도록 가능합니다.

📕 마무리

이번 리액트 19 버전 정식 업데이트가 정말 기대되는 상황입니다.

 

개인적으로 앞으로 개발하면서 자주 사용될 것 같은 핵심이라고 느끼는 것에 대해서만 정리를 해봤습니다.

 

위에서 소개한 것들 외에도 유용하고 개선되는 것들이 정말 많아서 공식 문서를 꼭 확인해 보시길 권장드립니다.

 

참고:

• https://19.react.dev/reference/react
• https://www.youtube.com/watch?v=2NPIYnY3ilo&ab_channel=CodeBootcamp
• https://velog.io/@typo/react-19-beta