[React] 리액트 앱 디버깅하기(섹션7)

오류를 찾고 해결하는 것은 개발의 중요한 과정 중 하나

• understanding error massages
• debugging & analyzing react apps
• using the react dev tools

---

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

특정 에러들은 터미널 창과 브라우저에서 해당 오류메세지와 오류가 발생한 코드 부분을 보여준다. 이 오류 메세지를 읽고 오류 발생 부분을 확인하여 해결하도록 하자.

 

---

2. 코드 흐름 및 경고 분석

터미널이나 브라우저에 오류가 뜨는 것은 아니고 프로젝트가 실행되지만, 예상과 다르게 작동할 때(논리적인 흐름이 맞지 않을 때, 논리적 오류)는 해당하는 기능에 해당하는 코드를 기준으로 따라 올라가면서 혹은 내려가면서 잘못 작성된 코드를 찾으면 된다. 혹은 개발자도구의 콘솔창에 경고 메세지가 있다면 해당하는 메세지를 보고 문제를 일으킨 코드를 찾을 수 있다.

 

---

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

논리적인 오류를 찾는 또 다른 방법은 개발자도구를 활용하는 것이다.

개발자 도구에서 source창을 열어보자. 거기서 static/js폴더 아래의 폴더들을 살펴보면 src폴더의 우리가 리액트로 작성한 파일들이 있는 것을 볼 수 있다.여기서 오류가 발생한 것으로 예상되는 라인을 클릭하여 breakpoint를 찍고 해당 기능을 실행해 보면, 아래와 같이 제대로 실행된 경우에는 파란색이 뜬다.

개발자도구-source

그리고 위 이미지에 표시한 버튼(step into next function call)을 클릭하면 해당 라인의 코드 다음으로 실행되는 코드로 이동한다.

이런 과정을 거치면서 잘못된 부분을 찾을 수 있다.

 

---

4. 리액트 DevTools 사용하기

 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko 

React Developer Tools

위 chrome 확장 프로그램을 설치한다.

개발자도구

그럼 개발자도구 항목에 Components와 Profiler 두 가지 항목이 추가된 것을 볼 수 있다.

그 중에서 Components를 살펴보도록 하자.

개발자도구-components

그러면 위와 같이 프로젝트에 사용된 컴포넌트들을 트리구조로 확인할 수 있다. 또 특정 컴포넌트를 클릭하면 아래에 해당 컴포넌트의 상세 정보가 뜬다. props와 redered by(어느 컴포넌트에서 사용되는지), 또 hook이 사용된 경우 그에 관한 정보도 확인할 수 있다.

 

---

이번 내용은 개발자로서 꼭 필용한 능력, 오류를 찾고 해결하는 과정에서 도움이 될 만한 방법과 툴을 배워봤다. 이를 바탕으로 오류를 쏙쏙 찾아보자!!