반응 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
    


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

    좋은 웹페이지 즐겨찾기