inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

React 18.3.1 버전에서는 ReactDom에서 render할 수 없습니다.

515

nimoya90

작성한 질문수 1

1

최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요..

기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.

HTML/CSS javascript react 버전이슈

답변 2

0

Inje Lee (소플)

안녕하세요, 소플입니다.

 

말씀해주신대로 리액트 버전18부터는 createRoot()를 사용하는 형태로 바뀌었습니다.

동영상 강의에는 반영이 되지 않은 부분들이 있기 때문에,

아래 리액트 버전18 기준의 실습 코드를 참고하여 실습 진행해주시기 바랍니다!

https://github.com/soaple/first-met-react-practice-v18

 

감사합니다.

1

nimoya90

안녕하세요, 좋은 강의 내용 제공해주심에 감사드리며,

해당 부분 수정이 강의 내용에 반영된다면 많은 다른 수강생들이 공부하기 편할 것 같아 남겼습니다 🙂

(검색해보니 관련 문의가 꽤 있던걸로 보였습니다.)

항상 감사드립니다.

0

Inje Lee (소플)

네, 말씀 감사합니다.

조만간 강의를 한 번 업데이트 하려고 계획 중에 있습니다.

그 때 관련 내용도 함께 업데이트 하도록 하겠습니다!😀

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. nimoya90님, 최신 React 버전에서 ReactDOM.render() 방식이 지원되지 않으며, 대신 createRoot 메서드를 사용하는 것이 필요합니다. 이러한 변화는 React 18에서 도입된 새로운 렌더링 패턴이라 할 수 있습니다.

React 18에서는 다음과 같이 코드를 업데이트하시면 됩니다:

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이 방식으로 렌더링 구조를 변경하면 최신 버전의 React에서 발생하는 문제를 해결할 수 있습니다. 이 변화는 동시성 모드를 지원하기 위한 것이며, 더욱 성능이 개선된 렌더링 방식을 제공합니다.

유사한 질문과 답변들은 아래 링크에서 더 확인하실 수 있습니다:

  1. React 18에서 ReactDOM.render()를 지원하지 않는 문제

또한, React 18에 대한 개발자 가이드를 참조하셔서 더욱 다양한 업데이트 내용을 확인하시기 바랍니다:
- React 공식 문서: React 18 업데이트 가이드

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

강의가 삭제되었다고 합니다

0

106

1

이거 왜 존재하지 않는다고 뜨는건가요

0

133

1

존재하지 않는 수업이라고 떠요

0

182

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

125

1

prevIsConfiromed 질문

1

141

2

chapter14 잘이해가 되지않습니다..

1

135

2

2025년 3월 리액트버전

1

201

2

npm 설치 오류

1

174

1

chapter_07 콘솔로그 질문드려요~!

1

127

2

안녕하세요 미니블로그 실습 질문드립니다.

1

178

3

에러가 떠요

1

218

3

Chapter6 질문 드립니다

1

208

2

실습 코드 있을까요?

1

205

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

307

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

139

1

버튼이 안 뜹니다

0

303

2

npx create-react-app my-app

1

470

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

375

3

Chapter_05 터미널, 리액트 에러

0

193

2

npx create-react-app my-app 명령어 반응없음

1

432

3

import 코드 에러

1

214

1

백틱

1

121

1