강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
95
4 asked
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>
Answer 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로 설정했는지도 한번 확인해 보시길 권장합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
npm run dev 실행 시 포트가 안뜨는 문제
0
203
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
87
2
렌더링 테스트 코드 (Hooks)
0
80
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
149
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
191
1
useMemo와 useCallback 사용 시기
0
207
2
onRightClickTd가 작동을 하지 않습니다.
0
226
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
248
1
npx webpack 실행시
0
313
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
235
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
531
2
React 랜더링이 되지 않습니다.
0
412
2
비동기로 동작하는 setState에 대해서
0
331
1
npm run dev 할 때 에러발생
0
479
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
206
1
devMiddleware의 필요성
0
352
1
리액트에서 화살표 함수를 사용해야하는 이유
0
935
2
path.join관련질문
0
282
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
374
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
491
4
useInterval.js 커스텀 훅에서, 왜 첫번째 useEffect를 계속 반복해야할까요?
0
466
2