Chapter_05 터미널, 리액트 에러

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

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

문제 분석:

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>
   );

ESLint 경고
- JSX에서 img 태그에는 alt 속성을 추가해야 접근성을 향상시킬 수 있습니다.
- 정의된 변수가 사용되지 않을 경우, 코드를 청결하게 유지하기 위해 사용하지 않는 변수를 삭제하거나 주석 처리해야 합니다.
- 경고는 코드의 품질을 향상시키기 위한 것이므로, 실제 오류는 아니지만 지금과 같은 상황에서 놓치지 않도록 주의가 필요합니다.
컴포넌트에서의 데이터 사용 방식
- CommentList.jsx에서 Comment 컴포넌트를 제대로 사용하고 있는지 확인해 주세요. 데이터 배열 comments를 활용하여 코멘트를 렌더링해야 합니다.

해결 방법:

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

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

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

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

문제 분석:

해결 방법: