리액트 버전업데이트에 관해 문의드립니다.

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

안녕하세요!

리팩토링 할 때는 먼저 큰 부분에서 작은 부분으로 해주시면 됩니다.
가장 큰 부분은
리액트 버전 업데이트 (클래스 컴포넌트 => 함수형 컴포넌트)
그리고 만약 파이어베이스를 현재 7인데 9버전으로 바꾸신다면 그 부분도 엄청 큰 부분입니다.
리덕스도 훅스를 사용할 수 있지만 만약 redux-toolkit을 사용한다면 그 부분도 크게 바뀌는 부분입니다.

그래서 이 3가지가 가장 큰 부분입니다.
다른 자잘한 라이브러리들은 이 3개가 업데이트가 다 된 이후에 필요에 따라서 업데이트해주시면 됩니다.

리액트 18까지의 큰 변화는 클래스 컴포넌트 => 함수형 컴포넌트(Hooks로인한)와 18버전에서
・ReactDOM.render is no longer supported in React 18. Use createRoot instead.
얘기해 주신 이 부분입니다.
그래서 먼저 바로 버전 18로 올리신 후에 이 부분 처리해주셔야 하는데
현재 클래스 컴포넌트사용 중이시라면 이 부분만 해도 시간이 엄청 걸릴 것입니다 ㅠㅠ
(버전 하나씩 올릴 필요는 없습니다 ~ )

그리고 파이어베이스도 8버전과 9버전은 완전히 바뀌기 때문에 바꿔야한다면
전체적으로 바꿔주시면 되고

리덕스도 useSelector, useDispatch 로 바꿔주시고 더 바꿔야 한다면 redux toolkit도 살펴보시면 됩니다.

그리고 이 이후에 나머지 자잘한 라이브러리들 앱은 하나씩 바꾸고 앱에 문제가 없는지 테스트 해야합니다.

리팩토링은 개발 과정 중에서도 굉장히 난이도 있는 부분입니다.
왜냐하면 이미 그 프로젝트 소스코드를 대부분 이해하고 있어야 하고 그것을 리팩토링 하게 될 부분도 하나하나 이해해야하기 때문입니다 ~

위에 설명한 순서대로 하나씩 에러가 나고 있는지 체크하면서 진행해 주시면 되겠습니다 !

감사합니다~

mihyun Lee

리액트 버전업데이트에 관해 문의드립니다.

이 글과 비슷한 Q&A

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요

onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다