Debugging React Apps [React-The Complete Guide]

 Finding & Fixing Errors

• Making Sense of React Error Messages
• Finding Logical Errors via the Browser DevTools & Debugger
• Enabling React's Strict Mode
• Using the React DevTools for Application Analysis & Manipulation

 

 

*콘솔에서 오류 메세지가 출력되는 경우

오류 메세지 뒤의 stack-trace를 통해 문제가 발생하는 코드의 부분을 찾아갈 수 있음.

ex) Value값 undefined 가져올 수 없는 case

초기값 없을 시 if return을 통해 예외 처리 

 

 

 

*코드에 논리적 오류가 있는 경우 

콘솔에 오류 메세지가 출력되지 않음.

value 값을 못 읽는 경우가 아니라, 잘못된 값을 가져오거나, NaN처리되는 경

 

실제 실행되는 과정에서의 중간 값과 실행 시점을 살펴보아야 함.

=> 리액트 프로젝트 브라우저에서 확인 가능. Sources 창 -> loacalhost:5173 /src/  

(예상 에러 코드파일) App.jsx 가 아닌 App.jsx로 들어가서 줄 번호를 클릭하여 중단점 설정. 

디버그를 진행하며, 현재 실행중인 코드위치, 변수들의 값을 확인해갈 수 있음

 

ex) JS의 수학적 계산에서 문자열과 숫자값을 혼용하는 경우 이상한 값이 결과로 나올 수 있음

 => 문자열에 +기호를 붙여줌으로써 숫자로 변환. 

 

React의 Strict Mode 

import ReactDOM from 'react-dom/client';
import {StrictMode} from 'react';

import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
	<StrictMode>
		<App />
	</StrictMode>
);

보통 index.jsx에서 App component에 적용시키지만, 원한다면 일부에만 적용시킬 수 있음.

리액트에서 import 하는 component 중 1

 

 모든 컴포넌트 함수를 두번씩 실행 함 .

배포 전 개발 단계에서만, 서버에 업로드하면 더 이상 두 번 실행하지 않음.

   => 에러를 찾기 보다 쉬워짐. 

ex) 사용하는 배열의 초기화가 누락된 건에 대하여, 

      에러 발생 부분의 컴포넌트가 2개 출력되기에 즉각적으로 확인해 볼 수 있음. 

 

 

React DevTools

 추가 확장 프로그램 React DevTools를 통해 Components와 Profiler 두 페이지를 활용할 수 있음

 

Components : App Component Tree를 보여줌. UI의 어떤 부분이 어떤 컴포넌트에서 렌더링되는지 볼 수 있음

                        컴포넌트 클릭 시, 어떤 속성을 가지는지, 해당 속성이 어떤 타입인지... etc 

                         값을 바꾸며 UI에 적용되는 모습들을 즉시 확인 가능.

                         사용되는 hooks들 또한 밑 부분에서 확인 가능. 

Profiler : React Application 내부 성능 문제들을 찾고 다루는 것을 도와줌.

 

 

 

---

React Developer Tools - Chrome 웹 스토어