인프런 커뮤니티 질문&답변
작성한 질문수
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
작성
·
20
0
master 브랜치가 더 최신 수정일이라서 master꺼 복붙해서 쓰다가 계속 createRoot 관련 에러가 나서 30분정도 헤매었네요..
확인해보니 master 내 코드 일부가 react 18로 변경이 안되어서 그런거 였네요..
(사용X) 리액트 16버전 (master 브랜치에서 복사 시, createRoot 사용 시 에러남)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
(이걸로) 리액트 18버전 (react18 브랜치에서 복사 시)
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
해도디님, ReactDOM.createRoot와 관련된 에러로 어려움을 겪으셨군요. React 18로의 업그레이드 시 몇 가지 주의사항이 있습니다. React 18에서는 ReactDOM.render가 사용 중단되었고, 대신 createRoot API를 사용하게 됩니다. 따라서 코드에서 createRoot를 사용하는 경우, 리액트와 리액트-돔의 버전을 18로 업데이트해 주셔야 합니다.
문제 해결을 위해서는 리액트와 리액트 돔의 CDN을 버전 18으로 변경하셔야 합니다. react18 브랜치의 코드를 사용하면, 이와 관련된 설정이 이미 반영되어 있으니, 해당 브랜치의 코드를 복사하여 사용하는 것이 좋습니다.
질문에서 언급한 두 가지 스크립트는 아래와 같습니다:
- 리액트 16 버전 (사용하지 않음)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
- 리액트 18 버전 (사용 권장)
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
리액트 버전을 제대로 설정하시면, 이와 같은 문제가 해결될 것입니다. 추가로, package.json 파일의 의존성 설정이나, 프로젝트의 다른 부분에서 React 버전을 18로 설정했는지도 한번 확인해 보시길 권장합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.