반응 18에서 17.0.2로 다운그레이드하는 방법

기술의 변화로 인해 내 코드가 중단되는 것을 정말 두려워하는 사람은 나만이 아닐 수도 있지만 더 이상 두려워할 필요가 없습니다. 새 리액트 18이 배포된 상태에서 리액트 17.0.2로 쉽게 다운그레이드하는 방법을 보여드리므로 충분한 시간을 갖고 업그레이드를 준비할 수 있습니다.

1. 반응 앱 만들기

폴더를 만들고 이름을 react-downgrade-2022 또는 원하는 대로 지정합니다.

터미널을 열고 create-react-app를 실행합니다.

npx create-react-app .

2. react 및 react-dom 제거

react 앱을 만들면 react 18 및 react-dom 18이 함께 제공되지만 react 17.0.2 및 react-dom 17.0.2로 다운그레이드하려고 하기 때문에 원하는 것이 아닙니다.

{
  "name": "react-downgrade-2022",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0", // <===
    "react-dom": "^18.0.0", // <===
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

react 18 및 react-dom 18을 제거하고 이제 실행해야 합니다npm uninstall react react-dom.

npm uninstall react react-dom

이는 우리가 react 18과 react-dom 18을 제거할 수 있도록 수행됩니다. 우리는 react 17과 react-dom 17로 다운그레이드하려고 합니다.

3 react 17 및 react-dom 17 설치

이제 react 17과 react-dom 17을 다시 한 번 실행하여 원하는 것을 얻으려면 npm install [email protected] [email protected]를 실행하십시오.

npm install [email protected] [email protected]

React는 더 이상 사용되지 않는 경고 표시로 소리를 지르며 표시되는 경고 표시는 무시합니다.

4 index.js 변경

우리는 이미 react 18을 설치했기 때문에 index.js 일부 기본 react 18 설정이 제공되며 react 17.0.2와 일치하도록 변경해야 합니다.
index.js 디렉토리에서 src 파일로 이동합니다.

// react 18

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>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이제 아래 코드를 복사하여 index.js 파일에 붙여넣으십시오.

// react 17.0.2

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

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

5 마무리

이제 반응 18에서 반응 17.0.2로 성공적으로 다운그레이드했습니다.
실행 npm start

npm start

감사합니다 팔로우 부탁드려요