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

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

ReactDOM.render가 아닌 root.render를 사용하는 형태로 수정해보시기 바랍니다!

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. dlwlgur37님.

리액트 실습 중 발생한 오류와 경고 메시지에 대해 설명드리겠습니다. 제공하신 이미지와 함께 문제를 분석해보겠습니다.

문제 분석:

1. Uncaught runtime error 및 render가 함수가 아님
   
   • 이 오류 메시지는 render 함수가 제대로 호출되지 않음을 나타냅니다. React 18부터는 ReactDOM.render 대신 ReactDOM.createRoot를 사용하여 루트를 생성하고, 그 루트에 대해 root.render()을 사용해야 합니다.
     
   • 참조 링크: React 18에서의 변경 사항에 대한 설명
     

   import React from 'react';
   import ReactDOM from 'react-dom/client'; // 'client'가 포함되어야 합니다.
   import './index.css';
   import CommentList from './chapter_05/CommentList';

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

2. ESLint 경고

   • JSX에서 img 태그에는 alt 속성을 추가해야 접근성을 향상시킬 수 있습니다.
     
   • 정의된 변수가 사용되지 않을 경우, 코드를 청결하게 유지하기 위해 사용하지 않는 변수를 삭제하거나 주석 처리해야 합니다.
     
   • 경고는 코드의 품질을 향상시키기 위한 것이므로, 실제 오류는 아니지만 지금과 같은 상황에서 놓치지 않도록 주의가 필요합니다.
     

3. 컴포넌트에서의 데이터 사용 방식

   • CommentList.jsx에서 Comment 컴포넌트를 제대로 사용하고 있는지 확인해 주세요. 데이터 배열 comments를 활용하여 코멘트를 렌더링해야 합니다.
     

해결 방법:

• index.js 파일에서 ReactDOM.createRoot 방식으로 코드를 수정하면 기본적인 오류는 해결될 것입니다.
  
• JSX에서 alt 속성을 추가하고, 사용하지 않는 변수들을 관리하세요.
  
• CommentList 컴포넌트 내부에서 comments 배열을 제대로 순회하며 Comment 컴포넌트를 렌더링하는지 확인하세요.
  

모든 수정 작업 후 저장하는 것을 잊지 마세요.

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