[React 완벽 가이드] section 7 : 리액트 앱 디버깅 하기

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

91. 모듈 소개 

• Debugging React Apps
• Finding & Fixing Errors
• Understanding Error Messages
• Debugging & Analyzing React Apps
• Using the React DevTools

92. 리액트 오류 메시지 이해하기 

• 스스로 오류를 이해하고 해결해야 한다. 
• 문제가 있는 소스코드를 살펴보고, 어디서 문제가 발생했는지 그 줄이나 파일을 살펴봐라. 그러면 대부분의 오류들은 해결할 수 있다! 

Failed to compile.

./src/App.js
SyntaxError: /Users/yuri/workplace/best-react/section-07/01-starting-project/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (43:6)

  41 |         <CourseInput onAddGoal={addGoalHandler} />
  42 |       </section>
> 43 |       <section id="goals">
     |       ^
  44 |         {content}
  45 |       </section>
  46 |

→ 예를 들어 다음의 오류에서는 컴파일에 실패했다고 나온다. 43번째 줄의 7번째 열 / 

→ 하나의 return 문 안에 명령문 2개를 나란히 가질 수 없다. 

 

93. 코드 흐름 및 경고 분석

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

→ 개발자 도구의 console.log 를 보면 된다. 브라우저는 우리가 코드에 추가한 로깅 메시지들을 보여준다. 여기서 경고 메시지를 볼 수 있다. (goal1이라는 같은 키를 가진 2개의 children 이 존재한다는 의미)

94. 중단점 (breakpoint) 작업하기 

• 개발자 도구 > Source 탭애 들어가면 현재 웹 페이지에서 사용 중인 소스 파일을 찾아볼 수 있다. js 파일도 포함되어 있다. 
• 리액트 개발 과정에서 실행되는 npm start 스크립트는 브라우저에서 코드를 보내서 실행될 수 있도록 하고, 또한 브라우저에게 추가적인 정보를 제공해서 브라우저 개발자 도구가 우리가 작성한 코드를 디버그할 수 있도록 해준다. 심지어 그 코드가 브라우저에서 제대로 동작하지 않더라도! 
• 이러한 리애트 개발 과정은 브라우저에서 실행되는 코드와 우리가 작성한 코드 사이에서 브릿지 역할을 한다. 



→ CourseGoalItem에 가면, deletehandler가 있다. 추가하고 싶은 줄을 클릭해서 중단점을 추가할 수 있다.  이후 Steop over next , Step into next function, Resume 를 사용하여 코드를 단계적으로 살펴볼 수 있다. 

95. 리액트 DevTools 사용하기 

• we see the actual React Components and the Components structure

---

https://www.udemy.com/course/best-react/