Context 변경 사항

React 19에서는 기존의 Context.Provider 대신 <Context> 자체를 Provider로 사용하는 새로운 방식을 도입했습니다.

이전 방식

import { createContext, useContext, useState } from "react";

// Context 생성
const ThemeContext = createContext();

// 부모 컴포넌트
const ParentComponent = () => {
  const [theme, setTheme] = useState("dark");
  const changeTheme = (theme) => {
    setTheme(theme);
  };

  return (
    // Context.Provider를 사용하여 값 전달
    <ThemeContext.Provider value={{ theme, changeTheme }}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

// 자식 컴포넌트
const ChildComponent = () => {
  const { theme } = useContext(ThemeContext);
  return <div className={theme}>Hello world!</div>;
};

export default ParentComponent;

변경된 방식

import { createContext, useContext, useState } from "react";

// Context 생성
const ThemeContext = createContext();

// 부모 컴포넌트
const ParentComponent = () => {
  const [theme, setTheme] = useState("dark");
  const changeTheme = (theme) => {
    setTheme(theme);
  };

  return (
    // Context 자체를 사용하여 값 전달
    <ThemeContext value={{ theme, changeTheme }}>
      <ChildComponent />
    </ThemeContext>
  );
};

// 자식 컴포넌트
const ChildComponent = () => {
  const { theme } = useContext(ThemeContext);
  return <div className={theme}>Hello world!</div>;
};

export default ParentComponent;

ForwardRef 변경사항

React 19에서는 ref를 prop으로 직접 전달할 수 있게 되었습니다.

이제는 **forwardRef**를 사용할 필요가 없으며, ref를 prop으로 직접 전달하고 사용할 수 있습니다.

이전 방식

import { useRef, forwardRef } from "react";

// forwardRef를 사용하여 ref를 전달받는 컴포넌트 생성
const MyComponent = forwardRef((props, ref) => {
  return <div ref={ref}>Hello</div>;
});

export default function App() {
  const myRef = useRef("MyRef");

  return <MyComponent ref={myRef} />;
}

변경된 방식

import { useRef } from "react";

// ref를 prop으로 직접 전달받는 컴포넌트 생성
const MyComponent = ({ ref }) => {
  return <div ref={ref}>Hello</div>;
};

export default function App() {
  const myRef = useRef("MyRef");

  return <MyComponent ref={myRef} />;
}

Ref의 Cleanup 함수