ReactDOM.render .createRoot 질문 드립니다.
565
작성한 질문수 44
ReactDOM.render(
<React.StrictMode>
<CommentList />
</React.StrictMode>,
document.getElementById('root')
)위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요.
.render대신에 .createRoot로 사용하면 될까여?
만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.
답변 2
0
안녕하세요, 소플입니다.
AI 인턴이 잘 답변해줘서 해당 답변을 참고하시면 좋을 것 같고,
리액트 버전18 기준의 실습 코드에서는 아래 index.js 파일 부분을 참고하시면 됩니다!
https://github.com/soaple/first-met-react-practice-v18/blob/master/src/index.js
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. Minkoo Lee님 질문에 대한 답변을 드리겠습니다.
질문자님이 겪고 계신 문제는 React 18에서 ReactDOM.render()을 사용할 때 발생하는 경고입니다. React 18 버전부터는 새로운 루트 API인 createRoot를 도입하여 동시성(concurrency) 모드와 관련된 기능들을 활용할 수 있게 되었습니다.
기존의 ReactDOM.render() 방식 대신 createRoot 방식으로 변경하는 방법에 대해 아래 코드를 참고해주시면 됩니다.
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<CommentList />
</React.StrictMode>
);
위 코드는 createRoot를 사용해 루트를 만들고, 해당 루트 객체의 render 메서드를 사용하여 컴포넌트를 렌더링하는 방식입니다.
해당 변경 사항 및 createRoot 사용 방법에 대한 유사한 답변 링크는 다음과 같습니다:
위 링크에서 강사님께서 ReactDOM.createRoot의 사용 예시를 보여주시고 React 18 버전에 대해 설명해주시고 있습니다. 또한, 아래의 링크에서도 비슷한 문제에 대한 답변을 확인할 수 있습니다:
위의 링크를 참조하여 React 18 에서의 변경사항을 적용하시면 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의가 삭제되었다고 합니다
0
118
1
이거 왜 존재하지 않는다고 뜨는건가요
0
143
1
존재하지 않는 수업이라고 떠요
0
186
1
안드로이드 에뮬레이터 오류
0
104
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
134
1
prevIsConfiromed 질문
1
146
2
chapter14 잘이해가 되지않습니다..
1
139
2
2025년 3월 리액트버전
1
208
2
npm 설치 오류
1
187
1
chapter_07 콘솔로그 질문드려요~!
1
132
2
안녕하세요 미니블로그 실습 질문드립니다.
1
184
3
에러가 떠요
1
221
3
Chapter6 질문 드립니다
1
212
2
실습 코드 있을까요?
1
210
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
236
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
312
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
145
1
버튼이 안 뜹니다
0
307
2
npx create-react-app my-app
1
474
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
380
3
Chapter_05 터미널, 리액트 에러
0
197
2
npx create-react-app my-app 명령어 반응없음
1
435
3
import 코드 에러
1
216
1
백틱
1
123
1