폐지 통지:React DOM.render는 React 18에서 지원되지 않습니다.

폐지 통지:React DOM.render는 React 18에서 지원되지 않습니다.

새로운 리액트 앱을 만들 때마다 다음 오류가 발생합니다.

경고: ReactDOM.render는 React 18에서 지원되지 않습니다.대신 createRoot를 사용합니다.새로운 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 동작합니다.상세: https://reactjs.org/link/switch-to-createroot

어떻게 하면 고칠 수 있죠?

React 앱을 만들었습니다.

npx create-react-app my-app

파일 index.js에서 다음으로 변경합니다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

타이프 스크립트의 경우

아래 댓글 섹션의 크레딧: Kibonge Murphy

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

리액트 18은 2022년 3월 29일에 출하되었습니다. ReactDOM.render는 React 18에서 권장되지 않으며 현재 경고를 발행하여 호환 모드로 실행됩니다.

폐지

폐지

• react-dom:ReactDOM.render는 폐지되었습니다.이를 사용하면 경고가 표시되고 앱이 React 17 모드로 실행됩니다.
• react-dom:ReactDOM.hydrate는 폐지되었습니다.이를 사용하면 경고가 표시되고 앱이 React 17 모드로 실행됩니다.
• react-dom:ReactDOM.unmountComponentAtNode는 폐지되었습니다.
• react-dom:ReactDOM.renderSubtreeIntoContainer는 폐지되었습니다.
• react-dom/server:ReactDOMServer.renderToNodeStream는 폐지되었습니다.

이 문제를 해결하려면 이전 버전의 React로 되돌리거나 index.js 파일을 React 18 구문에 맞게 업데이트하십시오.

예:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

대신:

import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

용도:

import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

자세한 내용은 이쪽

전에

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

끝나고

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

index.js 파일 앞:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

다음과 같이 index.js 파일로 변경합니다.

import React from 'react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<React.StrictMode>
  <App />
</React.StrictMode>);


reportWebVitals();

이전 버전의 React와 거의 동등한 기능을 제공하기 위해 위의 약간 축약된 버전을 사용합니다.<App>와 함께<React.StrictMode>.

또 다른 이유는 특정 파이프라인에서는 루트 변수에 액세스할 필요가 없기 때문에 스테이트먼트를 함께 연결하는 것이 더 의미가 있고 파일 전체가 코드 5줄에 불과하기 때문입니다.

import React from 'react';
import ReactDOM from "react-dom/client";

import './index.css';
import App from './App';

    ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);

(P.S. 위 코드에 웹바이서스 기능도 추가가 필요한 경우 잊지 마세요.

마지막으로 이 스타터 코드를 WebStorm IDE를 사용하여 라이브 템플릿으로 저장합니다.IDE에 따라 스니펫은 다르게 불릴 수 있지만 생각은 비슷해야 합니다.

말씀하신 대로 npx create-react-app my-app을 사용하여 React 앱을 만들었습니다.

• 명령어 실행 후 index.js는 이와 같아야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• 콘솔에 표시된 편집 후 코드

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

reportWebVitals();

에러 상태에서는, ReactDOM.render 는 서포트되고 있지 않습니다.새로운 createRoot를 사용합니다.

다음 코드에서 알 수 있듯이 (매뉴얼에서 가져온) ReactDOM.render를 createRoot로 대체하기만 하면 됩니다.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

index.js 파일:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

React 버전 18보다 이전 버전 사용

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById("root")
// );

React 버전 18에서 사용

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

이것으로 충분합니다.

import React from 'react';
import {createRoot}  from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById("root"))
root.render
  (
    <App />
  )

애플리케이션이 리액트 라우터를 사용하고 있는 경우는, 다음의 코드가 올바르게 동작합니다.

import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

(리액트 라우터를 사용하면) 완벽하게 동작합니다.

용도:

import ReactDOM from "react-dom/client";

const element = document.getElementById("root");

// Tell React to take control of that element
// In TypeScript, since there is a bug, you need to add the "!" element!
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848
const root = ReactDOM.createRoot(element!);


const App = () => {
  return (
   <React.StrictMode>
    <div>
      <h1>Hello world!</h1>
    </div>
   </React.StrictMode>
  );
};

root.render(<App />);

리액트 18에서.사용자 지정 웹 팩 구성을 사용하는 경우 React Refresh Webpack Plugin을 따르십시오.HMR이 내장되어 있습니다.

React 팀이 개발한 Fast Refresh를 사용할 예정입니다.

그 에러 메세지가 해결되었습니다.

import React, {createRoot} from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";


const root = ReactDOM.createRoot(document.getElementById("app"));
root.render( <App />);

용도:

import React, { useEffect } from "react";
import { createRoot } from "react-dom/client";

const App: React.FC<{}> = () => {
  useEffect(() => {
    fetchOpenWeatherData("Toronto")
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <img src="icon.png" />
    </div>
  );
};

const rootEl = document.createElement("div");
document.body.appendChild(rootEl);
const root = createRoot(rootEl);
root.render(<App />);

언급URL : https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18