인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

달콤한 치타님의 프로필 이미지
달콤한 치타

작성한 질문수

처음 만난 리액트(React)

(실습) JSX 코드 작성해보기

index.js 코드 질문!!

작성

·

419

0

안녕하세요 코드 작성을 그대로 진행했는데 잘 안되서

시행착오를 겪고 아래 코드로 진행을 했는데 잘 되서요.

이 코드로 작성해도 되는지 확인 부탁드립니다.

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

 

답변 1

1

Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

안녕하세요, 강유현님.

질문에 첨부해주신 코드를 사용하시면 됩니다.

 

해당 부분은 아래와 같이 React v18에서 바뀐 부분인데,

제 강의의 코드는 React v17을 기준으로 작성되었기 때문에 아마 잘 안되셨을 것 같습니다.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

 

아래 링크를 참고하시면 도움이 되실 것 같습니다!

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

달콤한 치타님의 프로필 이미지
달콤한 치타

작성한 질문수

질문하기