[React] React 버전 정책 - 버전 업데이트 방법 및 주버전(V16, 17, 18, 19) 특징

 

 

---

주의

해당 문서는 React 18에 대해 설명하고 있습니다. React 17은 아래를 살펴봐 주세요. https://17.reactjs.org.

 

 

 

개요

2022-03-29에 React 18 버전(18.0.0)이 처음 배포되었습니다. 2024-04-25에 18.3.0이 출시되기까지 약 2년 동안 18.2.0이 최신 버전으로 유지되었습니다.

이후 18.2.0과 동일한 기능을 유지하면서도 React 19에 맞는 변경 사항이 추가된 버전 18.3.0이 배포 2024-12-05에 React 19(19.0)가 정식 배포되었습니다.

이제 최신 버전과 가장 많이 사용되는 버전을 확인하고, 버전별 변경 사항을 살펴보는 시간을 가지려고 합니다.

 

 

리액트 변경 로그

https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022

react/CHANGELOG.md at main · facebook/react

 

 

리액트 버전 정책

• React는 유의적 버전 (semver) 원칙을 따릅니다.
• 즉, 버전 번호는 x.y.z 형태가 됩니다.
  • 치명적인 버그를 수정할 때는 z 번호를 바꾸고 수 버전을 올려 배포합니다. (예를 들어, 15.6.2에서 15.6.3)
  • 새로운 기능을 출시하거나 치명적이지 않은 버그를 수정할 때는 y 번호를 바꾸고 부 버전을 올려 배포를 합니다. (예를 들어, 15.6.2에서 15.7.0)
  • 호환성이 유지되지 않는 변경이 있을 때는 x 번호를 바꾸고 주 버전을 올려 배포를 합니다. (예를 들어, 15.6.2에서 16.0.0)

 

호환성이 유지되지 않는 변경 이력

• React 15는 2016년 4월
• React 16은 2017년 9월
• React 17은 2020년 10월
• React 18은 2022년 3월
• React 19은 2024년 12월

 

리액트 버전 업데이트 방법

리액트와 리액트 DOM을 설치

npm

npm install --save-exact react@^19.0.0 react-dom@^19.0.0

Yarn

yarn add --exact react@^19.0.0 react-dom@^19.0.0

 

타입스크립트를 사용시

npm

npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

Yarn

 

yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0

 

 

19 버전 주 변경사항

기타 호환성이 깨지는 변경사항

• react-dom: src와 href에서 자바스크립트 URL에 대한 에러 처리 #26507
• react-dom: onRecoverableError에서 errorInfo.digest 제거 #28222
• react-dom: unstable_flushControlled 제거 #26397
• react-dom: unstable_createEventHandle 제거 #28271
• react-dom: unstable_renderSubtreeIntoContainer 제거 #28271
• react-dom: unstable_runWithPriority 제거 #28271
• react-is: react-is에서 더 이상 사용되지 않는 메서드 제거 #28224

기타 주목할 만한 변경사항

• react: 동기, 기본 및 연속 레인 일괄 처리 #25700
• react: 일시 중단된 컴포넌트의 형제 요소 사전 렌더링 중단 #26380
• react: 렌더링 단계 업데이트로 인한 무한 업데이트 루프 감지 #26625
• react-dom: popstate에서의 전환이 이제 동기적으로 처리됨 #26025
• react-dom: SSR 중 layout effect 경고 제거 #26395
• react-dom: src/href에 빈 문자열 설정 시 경고 표시 및 설정 중단(앵커 태그 제외) #28124

Restore old behavior for empty `href` props on anchor tags by eps1lon · Pull Request #28124 · facebook/react

 

 

16 특징

•  
• React v16.8에서 새롭게 도입된 Custom Hooks는 상태를 가지는 로직을 함수로 쉽게 분리하기 위해 사용됩니다.

  내장된 Hooks인 useState와 useEffect를 활용하여 함수에 상태(state)와 생명주기(lifecycle) 관련 기능을 제공합니다.

 

 

17, 18버전의 차이

	React 17	React 18
릴리스 날짜	2020년 10월 20일	2022년 3월 29일
주요 초점	기존 기능과 동작 유지 및 점진적 업그레이드 지원	새로운 렌더링 기능 및 성능 개선 도입
Concurrent Rendering	미지원	지원 (기본 비활성화, createRoot 사용 필요)
Auto Batching	미지원	지원 (비동기 상태 업데이트도 배치 처리)
서버 렌더링	기존 SSR 방식 유지	새로운 서버 렌더링 API (React Server Components, streaming) 추가
Strict Mode 강화	일부 개발자 경고 제공	개발 환경에서 더 많은 경고 및 자동 재실행 지원
호환성	기존 React 생태계와 호환	대부분의 경우 React 17과 호환되지만 일부 Breaking Changes 존재
지원 종료	2021년 3월 22일 종료	현재 지원 중 (최신 버전: 18.3.0)

 

18, 19버전으로 마이그레이션

React 19로 업그레이드하기 전에 문제를 식별하기 위해 먼저 React 18.3으로 업그레이드하는 것이 좋습니다.

https://react.dev/blog/2024/04/25/react-19-upgrade-guide

React 19 Upgrade Guide – React

 

 

https://velog.io/@eunbinn/react-19-upgrade-guide?utm_source=substack&utm_medium=email#%EA%B8%B0%ED%83%80-%ED%98%B8%ED%99%98%EC%84%B1%EC%9D%B4-%EA%B9%A8%EC%A7%80%EB%8A%94-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD