React 오류

오류1

ERROR in [eslint]
src\App.js
  Line 43:6:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (43:6)
  40 |     <section id="goal-form">		-- setion1
  41 |         <CourseInput onAddGoal={addGoalHandler} />
  42 |     </section>
> 43 |     <section id="goals">			-- setion2
     |       ^
  44 |         {content}
  45 |     </section>

파싱 오류이다. Adjacent는 나란한 JSX요소를 의미하고 인접한 여러 jsx요소들은 하나의 태그 안에서 감싸주어야 된다.
리액트는 나란히 감싸져있는 요소들은 감싸서 한 요소로 만들도록 하는 규칙이 있다. 현재 코드를 보면 <section>이 있고 바로 다음에 또 <section>이 있다. 즉, 1개의 요소가 아닌 2개의 요소가 있는 것이다.

  return (
    <div>
      <section id="goal-form">
        <CourseInput onAddGoal={addGoalHandler} />
      </section>
      <section id="goals">
        {content}
      </section>
    </div>
  );

<div></div>를 활용하여 하나의 루트 요소로 감싸주면 해결된다. JSX를 반환하거나 변수에 저장하려면 반드시 한 개의 루트요소만 있어야하기 때문이다.

오류2

  Line 41:33:  'addGoalsHandler' is not defined  no-undef
  Search for the keywords to learn more about each error.
  
  <CourseInput onAddGoal={addGoalsHandler} />

addGoalsHandler가 정의되지 않아 생긴 오류이다. 리액트가 찾지 못하는 어떤 변수를 사용하려고 하기 때문이다. 여기서는 단순 오타이기 때문에 변수명을 고쳐주면 된다.

사용하려는 변수
const addGoalHandler = (enteredText) => {
    setCourseGoals((prevGoals) => {
      const updatedGoals = [...prevGoals];
      updatedGoals.unshift({ text: enteredText, id: 'goal1' });
      return updatedGoals;
    });
  };

수정
 <CourseInput onAddGoal={addGoalHandler} />

오류3

React를 삭제하기 원했는데 Master가 삭제됐다.
화면과 터미널에 오류가 표시되지 않았을 때의 해결방법은 2가지가 있다.

방법1

• 삭제 로직 확인

1. CourseGoalList.js

const CourseGoalList = props => {
  return (
    <ul className="goal-list">
      {props.items.map(goal => (
        <CourseGoalItem
          key={goal.id}
          id={goal.id}
          onDelete={props.onDeleteItem}
        >
          {goal.text}
        </CourseGoalItem>
      ))}
    </ul>
  );
};

2. CourseGoalItem.js
const CourseGoalItem = (props) => {
  const deleteHandler = () => {
    props.onDelete(props.id);
  };

  return (
    <li className="goal-item" onClick={deleteHandler}>
      {props.children}
    </li>
  );
};

3. App.js
 const deleteItemHandler = (goalId) => {
    setCourseGoals((prevGoals) => {
      const updatedGoals = prevGoals.filter((goal) => goal.id !== goalId);
      return updatedGoals;
    });
  };

삭제로직은 제대로 작동하지만 id가 잘못된 것을 확인할 수 있다. 따라서 id가 생성되어 할당되는 곳을 확인해야된다.

  const addGoalHandler = (enteredText) => {
    setCourseGoals((prevGoals) => {
      const updatedGoals = [...prevGoals];
      updatedGoals.unshift({ text: enteredText, id: 'goal1' });
      return updatedGoals;
    });
  };

id를 "goal1"로 설정한 것을 볼 수 있다. 이전에는 가상 고유의 id를 추출했지만 이제는 하드 코드된 고정 문자열이 있어서 오류가 발생한 것이다. 즉, 모든 목표에 같은 id를 할당했기 때문에 생긴 오류이다. 따라서 id로 구분하는 것은 불가능하다. 그렇기에 id를 수정해서 오류를 해결할 수 있다.

방법2

• 개발자 도구 확인
  

console창을 확인하면 같은 id값이 중복해서 할당됐다는 것을 확인할 수 있다. 또한, 발생 위치를 알려주기 때문에 빠르게 확인할 수 있다.