리액트 버전업데이트에 관해 문의드려요

Question

안녕하세요 리액트로 웹개발 시작한 6개월차 신입개발자 입니다.강의 정말 잘 보고있는데 너무 감사하게도 우연히 저희 안건과 개발환경이 많이 겹쳐서 큰 도움받고있습니다!현재 안건에서 쓰는 리액트버전이 15.6.1인데 이번에 최신버전 v18.2.0로 업데이트하는 미션이 떨어졌는데어떻게 헤쳐나가야할지 너무 답답해서 고민끝에 질문드립니다...현재 안건의 스펙입니다.・안건종류: 데이트 매칭 어플・메인언어: react・상태관리: redux・프레임워크 : koa・미들웨어: redux-thunk======== 개요 ========일단 검색으로는 잘 정리된곳 찾기가 어려워서 리액트공식문서와 책 위주로 참고해서 정리중인데요, 우선 큰 틀을 짜고 문제점들을 세분화하면서 틀을 좁혀가려고합니다..react, react-dom 최신버전 인스톨후에러를 우선순위별로 리스트화 하기・ReactDOM.render is no longer supported in React 18. Use createRoot instead.・Warning: componentWillMount has been renamed, and is not recommended for use.・componentWillReceiveProps has been renamed・You have triggered an unhandledRejection, you may have forgotten to catch a Promise rejection공동작업을 위한 규칙 리스트화 하기 ・class 컴포넌트 → function 컴포넌트로 변경・life cycle → useEffect 로 처리, 또는 커스텀 hook・react-redux 의 connect 함수 → useSelector, useDispatch Hooks로 리덕스와 컴포넌트 연동・state 업데이트시 불변성을위한 spread 연산자, immer 사용・코드 스플리팅: 라우팅에 React.lazy or Suspense 적용・react-redux 디렉토리 구조: 일반구조(component, container, reducer)-> ducks 패턴 사용해서 파일 모듈화의존중인 라이브러리및 패키지 업데이트2와 3을 진행하며 기타 에러를 해결======== 질문 ========3번의 [공동작업을 위한 규칙 리스트화]의 경우, 검색과 에러기준으로 만들고있는데 너무 부족한것같습니다. 프로젝트 버전 업그레이드시, 기준이 되는 컨텐츠가 있는지 궁금합니다.현재 리액트 구버전 15부터 16,17,18 최신버전까지의 모든 업데이트 변경점을 체크해서 일일이 적용해야하는지(←React공식문서블로그에서), 단순히 15->18로 점프해서 바뀐사항만 적용해도되는지현재 구버전에서 사용중인 각종 패키지, 라이브러리 업데이트는 어떤 방향으로 진행해야할지-> 이부분이 제일 손대기 어려울정도로 막막합니다. 리액트버전업뎃처럼 똑같이 최신버전인스톨, 에러체크, 버전별 변경점 체크후 적용및 수정 하면 될까요?입사 3개월차에 선배나 가이드없이 진행중이라 정말 고민끝에 질문드립니다…혹시 시간나실때 답변이나 조언해주시면 정말 감사하겠습니다……(살려주세요…..)잘부탁드려요 ! (제발 구원의 손길을 ㅠㅠㅠ)package.json (react만 최신인스톨)'dependencies': {     '@paypal/paypal-js': '4.1.0',     'babel-runtime': '^6.25.0',     'chart.js': '^2.6.0',     'classnames': '^2.2.3',     'es6-promise': '^4.1.1',     'exif-js': '^2.2.1',     'firebase': '^7.7.0',     'history': '^3.3.0',     'koa': '^1.2.0',     'koa-static': '^2.0.0',     'lodash.reverse': '^4.0.1',     'lodash.sortby': '^4.5.0',     'lodash.throttle': '^4.0.0',     'lodash.uniqby': '^4.5.0',     'moment': '^2.17.0',     'moment-timezone': '^0.5.13',     'node-fetch': '^2.6.6',     'normalizr': '^2.3.0',     'object-assign': '^4.0.1',     'pm2': '^2.6.1',     'prop-types': '^15.5.10',     'react': '^18.2.0',     'react-chartjs-2': '^2.5.6',     'react-dom': '^18.2.0',     'react-ga': '^2.1.2',     'react-helmet': '^5.1.3',     'react-infinite-scroller': '^1.2.4',     'react-redux': '^5.0.2',     'react-router': '^3.0.5',     'react-router-redux': '^4.0.1',     'react-router-scroll': '^0.4.1',     'react-scroll': '1.5.4',     'react-slick': '^0.14.5',     'react-swipeable': '^4.0.1',     'react-textarea-autosize': '^5.0.6',     'redux': '^3.7.2',     'redux-actions': '^2.2.1',     'redux-api-middleware': '^1.0.3',     'redux-logger': '^3.0.6',     'redux-thunk': '^2.4.0'   },   'devDependencies': {     'babel-cli': '^6.7.5',     'babel-eslint': '^8.2.3',     'babel-plugin-espower': '^2.3.1',     'babel-plugin-module-resolver': '^4.1.0',     'babel-plugin-transform-async-to-generator': '^6.24.1',     'babel-plugin-transform-class-properties': '^6.6.0',     'babel-plugin-transform-export-extensions': '^6.22.0',     'babel-plugin-transform-object-rest-spread': '^6.23.0',     'babel-plugin-transform-runtime': '^6.15.0',     'babel-preset-es2015': '^6.6.0',     'babel-preset-react': '^6.3.13',     'babel-register': '^6.7.2',     'babelify': '^7.3.0',     'browserify': '^13.0.0',     'css-mqpacker': '^6.0.1',     'csswring': '^6.0.0',     'envify': '^4.1.0',     'eslint': '^4.19.1',     'eslint-config-tapplint': '^2.0.1',     'eslint-config-tapplint-react': '^1.0.0',     'eslint-plugin-react': '7.4.0',     'gulp': '^3.9.0',     'gulp-consolidate': '^0.2.0',     'gulp-htmlmin': '^3.0.0',     'gulp-iconfont': '^8.0.0',     'gulp-imagemin': '^3.3.0',     'gulp-notify': '^3.0.0',     'gulp-plumber': '^1.0.1',     'gulp-postcss': '^6.4.0',     'gulp-rename': '^1.2.2',     'gulp-sketch': '^1.0.5',     'gulp-sourcemaps': '^2.0.0',     'husky': '^0.14.3',     'karma': '^1.1.0',     'karma-browserify': '^5.0.5',     'karma-chrome-launcher': '^2.2.0',     'karma-mocha': '^1.0.1',     'karma-mocha-reporter': '^2.0.3',     'lint-staged': '^7.2.2',     'lodash': '^4.11.1',     'md5-file': '^4.0.0',     'mocha': '^3.5.0',     'postcss': '^5.2.17',     'postcss-cssnext': '^3.1.1',     'postcss-import': '^10.0.0',     'postcss-media-variables': '^2.0.0',     'postcss-nesting': '^2.3.1',     'power-assert': '^1.4.4',     'react-addons-test-utils': '~15.6.0',     'react-prefixr': '^0.1.0',     'require-dir': '^0.3.2',     'stylelint': '^7.13.0',     'stylelint-config-standard': '^16.0.0',     'stylelint-order': '^0.5.0',     'tapplint': '^0.9.0',     'terser': '^4.6.11',     'uglifyify': '^5.0.2',     'watchify': '^3.7.0',     'yargs': '^6.0.0'   }

Answer

강의와 관련이 크지 않은 내용이지만 일단 이번엔 간략하게나마 답변 드려볼게요.
앞으로는 다른 루트를 찾아보시면 좋겠습니다.

마이그레이션은 단번에 할 수 있는 일이 아니에요. 코드 전부를 뜯어고쳐야 하는 대대적인 작업임을 회사 구성원 모두가 이해하고 있어야 합니다. 작은 컴포넌트, 극히 일부에서만 쓰는 라이브러리부터 하나씩 바꿔보세요. (이조차도 의존성 때문에 쉽지 않을 겁니다..)
migration guide에 몇단계를 건너뛰는 내용을 소개하는 경우가 잘 없어서
처음에는 순차적으로 바꿔나가야 할 수도 있지만,
익숙해지면 전부 15->18로 다이렉트로 바꾸실 수 있을겁니다.
문제는 react 버전을 올리는 순간 안나던 오류들이 뻥뻥 터질거라서.. (componentWillReceiveProps, componentWillMount, componentWillUpdate 등)
얘네들은 가이드에 따라 처음부터 UNSAFE_를 붙여놓고 시작하셔야 하겠죠.
긴 프로젝트가 될겁니다. 회사와 잘 협의하여 다른 작업과 병행하여 투트랙으로 진행하거나, 아예 단독으로 몇달(프로젝트 사이즈에 따라 반년 혹은 그 이상이 걸릴수도..)에 걸쳐 다른 일정 모두 비워놓고 진행하는 방안을 논의해 보시면 좋을 것 같네요.
p.s) 어쩌면 새로 만드는 편이 나을 수도 있습니다..

mihyun Lee

리액트 버전업데이트에 관해 문의드려요

이 글과 비슷한 Q&A

css에서 calc에 대해 질문있습니다.

eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 없습니다.

localhost:3000/qqq 안됩니다..

flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류