React.js Debugging

Syntax Error
- 문법상의 오류는 바로 에러가 뽝 뜨면서 브라우저가 에러로 꽉 차기때문에 바로 알기 쉽다
- 반면 에러 없이 작동은 되는데 내가 원했던 기능이 안먹는경우는 로직이 어딘가 꼬였을 확률이 높다
Logical Error
- 크롬의 Dev tool을 이용하여 디버깅을 할 수 있다
- Source 탭의 에러가 났을 파일의 라인을 클릭하여 break point를 잡는다
- 이 부분이 실행이 되면 화면이 paused 되고 해당 내용을 살펴볼 수 있다
- 예를 들어 this.state.id === id 라는 부분의 state가 뭔지 id가 뭔지 등등?
React Developer Tools
- 크롬 확장 프로그램인 React Developer Tools
- ~~이건 뭐 거의 필수이니깐~~
- 컴포넌트를 뜯어서 볼 수 있고 자체적으로 수정한 모습도 브라우저에서 확인을 할 수 있다
Error Boundary
- Error 발생시 메세지를 출력하는 컴포넌트를 만들어서 에러가 발생할 확률이 높은 element를 감싸준다.

참고 자료