리액트 오류 메세지 이해하기

Failed to compile.

./src/App.js
SyntaxError: /Users/jiyeongjun/Desktop/FEzerojun/TIL/react-udemy/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 |         {/* {courseGoals.length > 0 && (
  46 |           <CourseGoalList

위 오류 메세지는 컴포넌트의 jsx를 리턴할 때 최상위 엘리먼트를 두 가지로 둔 후 프로젝트를 실행시켰을 때 발생한 에러다.

에러메세지만 잘 살펴보아도 대부분의 문제가 해결된다. 위에서 확인할 수 있는 내용은 다음과 같다.

1. 컴파일에 실패했다.
2. 에러의 종류는 parsing error다.
3. 나란한 jsx요소 (Adjacent JSX elements)가 하나의 태그 안에서 감싸져야 한다.
4. 에러가 발생한 부분은 ./src/App.js파일의 43번째 줄의 6번째 열이다.

이를 토대로 인접한 JSX를 나란히 반환하는 부분을 하나의 루트 요소로 감싸우저 에러를 해결할 수 있다.

코드 흐름 및 경고 분석

어떠한 에러메세지도 표출되지 않았지만 기대하던대로 동작이 이루어지지 않을 경우 두 가지 방식으로 문제를 해결할 수 있다.

• 동작에 관여하는 모든 로직을 하나씩 살펴보면서 범위를 좁혀나가는 방식

• 개발자 도구의 console에서 문제를 지적하는 경우 해당 지점을 확인하는 방식

중단점(Break Point) 작업하기

npm start스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고, 브라우저에게 추가적인 정보를 제공해서 브라우저 개발자 도구가 포착해서 작성한 코드의 원문 형태에서 코드를 디버그 할 수 있도록 해준다.

브라우저에서 제대로 작동하지 않는 코드도 디버그할 수 있다.

개발자도구의 Source탭에 Users/사용자이름폴더 -> src폴더에 가면 리액트 코드를 확인 할 수 있다. 만약 보이지 않으면 webpack의 하위폴더에 src폴더가 있을 것이다.

한줄 씩 실행하면서 직접 스코프, 변수, 콜스택을 살펴보면서 디버깅 하면 어느 부분에서 예측하지 않은 동작이 발생하는지 눈으로 파악할 수 있게될 것이다.

리액트 DevTools사용하기

react DevTools를 사용하면 컴포넌트의 각종 상태에 대해 편하게 확인하고, 제어할 수 있어 만들어진 리액트 앱을 분석하거나, 테스트하기에 아주 용이하다