인프런 커뮤니티 질문&답변

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

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

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

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

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

감사합니다.

안녕하세요, 인프런 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 업데이트 가이드

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