인프런 커뮤니티 질문&답변
작성한 질문수
챕터 6 Notification 만들기 실습 질문입니다.
작성
·
191
0
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
교수님 코드르 따라가면서 공부하고 있습니다.
Lifecycle method의 호출 확인을 위해 console 창에 들어갔는데 제일 위에 저 경고가 떠있는데 왜 그런건가요??
답변 2
0
안녕하세요, 소플입니다.
위에 AI 인턴이 답해준대로 현재 최신 버전인 리액트 버전18에서는 ReactDOM.render() 방식이 아닌 createRoot()를 사용해야 합니다.
아래 리액트 버전18기준의 실습 코드를 참고해서 강의를 수강하시기 바라고,
학습 중 궁금한 점은 언제든지 질문 남겨주세요!😀
https://github.com/soaple/first-met-react-practice-v18/blob/master/src/index.js
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
김준서님의 질문과 매우 유사한 상황에 대한 답변이 이미 제공되어 있습니다. “React 18에서 ReactDOM.render()를 지원하지 않는 문제”에 대한 질문에서, React 18 버전에서 ReactDOM.render() 방식이 지원되지 않고, 대신 createRoot() 방식을 사용해야 한다는 것이 언급되었습니다. React 18에서 ReactDOM.render()를 지원하지 않는 문제에서 해당 내용을 확인하실 수 있습니다.
질문의 핵심은 React 18에서 ReactDOM.render() 대신 createRoot를 사용해야 한다는 경고 메시지입니다. React 18 업데이트로 인해 도입된 새로운 동시성 모드(concurrent mode)를 지원하기 위해서는 createRoot 메서드를 통해 어플리케이션의 루트를 생성해야 합니다. 이 방식은 React 18에서 새롭게 도입된 체계로서, 앱의 루트에서 React 엘리먼트를 렌더링합니다.
질문에서 언급된 경고 메시지는 바로 이러한 변경을 반영하는 것입니다. 따라서 React 17 버전과 이전의 코드를 React 18로 업그레이드할 때 해당 변경 사항을 반영해야 합니다. 아래는 변경된 방식을 적용하기 위한 예시 코드입니다.
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
이 방식은 기존의 ReactDOM.render(<App />, document.getElementById('root')); 방식을 대체하는 것으로, 최신 React 버전에서 권장되는 방식입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.