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

• 한 입 크기로 잘라먹는 리액트 책 잘 보고 있습니다.

• 카운터앱 프로젝트는 완료 후,

  두 번째 할 일 관리 앱 실행 중에 문제가 발생해서 문의드려요.

•  

•  

  

  
  
  1. 문제 : 326쪽까지 문제없이 잘 실행이 되었는데,
  327쪽 <div>{it.content}</div>
  이 코드를 넣었을때부터 327쪽 책과 동일하게 코드 넣었는데, 에러 문구가 아래처럼 나왔어요.

•  

WARNING in [eslint] src\component\TodoList.js Line 1:8: 'TodoItem' is defined but never used no-unused-vars webpack compiled with 1 warning

TodoItem을 import했지만, 코드에서 사용하지 않아서 발생하는 ESLint 경고인 것 같은데,

{todo.map((it) => ( <TodoItem key={it.id} content={it.content} /> ))}
여기서 TodoItem이 개별 할 일을 나타내는 컴포넌트라고 가정하고 content를 props로 전달했습니다.
(이때, key 값으로 it.id를 사용하여 React에서 리스트 렌더링 최적화를 도와야 합니다.)
파란색 부분과 같은 조언을 받아 코드를 수정했더니 npm run start 실행하면 서버에서 지금까지 한 모든 화면이 안 보이고 백지화 되었어요. ㅠㅠ

기존에 html5로 이펍3 만들기 조금 배웠고, css개념 어느 정도 이해하는 수준의 초보인데,

책 보고 프로젝트1 마치고, 프로젝트2도 거의 다 와가서 재미있게 하는 중에 날벼락이 ㅠㅠ;

혼자서는 도저히 해결이 안 될 거 같아서 강의등록 후 문의드려요.. 초보라 문의도 이렇게 하는게 맞는지 모르겠네요.

답변 부탁드릴게요~

참고 todoeditor.js return 이하

App.js

import "./App.css";
import Header from "./component/Header";
import TodoEditor from "./component/TodoEditor";
import TodoList from "./component/TodoList";
import { useState, useRef } from "react";

const mockTodo = [
  {
    id: 0,
    isDone: false,
    content: "React 공부하기",
    createDate: new Date().getTime(),
  },
  {id: 1,
    isDone: false,
  content: "빨래 널기",
  createDate: new Date().getTime(),
  },
  {id: 2,
    isDone: false,
  content: "노래 연습하기",
  createDate: new Date().getTime(),
  },
];

function App() {
  const idRef = useRef(3);
  const [todos, setTodos] = useState(mockTodo);

const onCreate = (content) => {
  const newItem = {
    id: idRef.current,
    
    content,
    isDone: false,
    createDate: new Date().getTime(),
  };
  setTodos([newItem,...todos]);
  idRef.current += 1;
};

   return (
  <div className="App">
    <Header />
    <TodoEditor onCreate={onCreate} />
    <TodoList todos={todos}/>
  </div>
  );
}
export default App;