해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

Question

package.json 파일 보시면 리액트 버전이 나오실텐데 저는 19 버전이라 위같은 에러가 뜨네요. 따라서, 기존 코드를 (리액트 17버전 이하에서 정상작동).. const ReactDom = require('react-dom'); ReactDom.render(, document.querySelector('#root')); 아래처럼 변경해주셔야 합니다. import { createRoot } from 'react-dom/client'; createRoot(document.querySelector('#root')).render();

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 해도디님. React 18 버전 이상에서는 ReactDOM.render 가 더 이상 지원되지 않으며 대신 createRoot 를 사용하여 변경해야 한다는 점을 잘 지적해 주셨습니다. 패키지 버전 관리는 미스매치 에러의 주요 원인이 될 수 있는데요, React 18에서는 새로운 API를 도입하여 애플리케이션 성능 최적화를 도모하고 있습니다. createRoot 사용 예시는 다음과 같습니다: import { createRoot } from 'react-dom/client'; createRoot(document.querySelector('#root')).render(<WordRelay />); 다음 링크에서 유사한 문제와 해결책을 확인할 수 있습니다: ReactDOM.render is no longer supported in React 18 콘솔에러 질문드립니다 위 질문에서는 React 18로 업그레이드 후 발생하는 오류와 그 해결 방법에 대해 다루고 있습니다. 18버전에서의 ReactDOM.render 여기서는 createRoot 사용과 관련된 Typescript의 에러 메시지에 대한 설명이 포함되어 있습니다. 이 외에도, 리액트 버전 관련 이슈 해결을 위한 공식 문서나 커뮤니티에서 다양한 사례를 참고하는 것도 추천드립니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.