React - Debugging

리액트에서는 여러 오류가 발생하는데 이 오류가 왜 발생하는지 알고 이를 해결할 수 있어야 한다. 그래서 이를 어떻게 해결하는지 알아보았다.

terminal

터미널에 npm start를 입력하여 프로젝트를 실행하면 터미널에 아래와 같이 오류가 뜬다.

1. 어떤 파일에서 오류가 발생했는지
2. 해당 파일에서 어떤 줄에 오류가 발생했는지
3. 오류가 발생한 이유

이렇게 터미널을 보고 오류에 관련된 정보를 보고 이를 해결할 수 있다.

위 오류는 JSX 요소들을 하나의 루트 요소로 감싸줘야 하는데 이를 해주지 않아 발생한 것이다.

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

그래서 위와 같이 <div>로 감싸주니 더이상 오류가 발생하지 않는다.

개발자 도구

goal을 누르면 사용자가 선택한 goal이 삭제가 되는데, 현재 만들어진 페이지에서는 클릭한 것과 다른 goal이 삭제되는 모습을 볼 수 있다.

terminal에서는 더 이상 오류가 잡히지 않지만 크롬 웹에서 F12를 눌러 개발자 도구 창을 열어보니 오류가 발생했다고 알려주고 있다.
오류 내용은 같은 key 값을 가진 children이 있으니 이를 수정하라고 하는데 key를 발급해주는 코드를 보자.

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

App.js에서 Goal을 추가하는 핸들러인데 id가 하드코딩으로 "goal1"로 할당되도록 작성되었다. 때문에 사용자가 원하는 goal과 다른 goal이 삭제가 되었다.
이를 Math.random()으로 교체를 하게되면 오류가 발생하지 않는다.

이처럼 react에서 오류를 발견하는 방법은 몇 가지가 있으며 이르 통해 스스로 오류를 수정하는 습관을 가져보자.