React 디버깅 끝판왕: 문제를 뿌리부터 뽑는 법

프로그래밍을 하면서 내가 만든 웹 사이트가 전부 정상적으로 도아간다면 너무나 좋겠지만, 만들어진 사이트를 운영하다보면 무수히 많은 불청객들이 찾아온다.

바로 버그인데. 간단한 오탈자, UI 오동작부터 원인을 찾기 힘든 여러가지 버그들이 발생한다. 이 같은 버그들을 미연에 방지하거나 해결하기 위해 이루어지는 작업을 디버깅이라고 한다.

 

프론트엔드에서 사용할 수 있는 디버깅 방법에는 어떤것들이 있을까? 

여기 찾아오신 모든 분과 함께 보도록 하겠다.

 

1. React 디버깅 기본기

1-1. 콘솔 로그 활용 (console.log)

가장 기본적인 방법이지만 여전히 강력하게 사용되는 디버깅 방법이야.

const fetchData = async () => {
  try {
    console.log("🚀 Fetching data..."); // 어디서 문제가 생기는지 확인
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log("✅ Data received:", data); // 데이터 확인
  } catch (error) {
    console.error("❌ Error fetching data:", error);
  }
};

👉 console.log 를 적절히 활용하면 흐름을 파악하는 데 도움이 된다.

 

2. React 개발자 도구(React DevTools

React 공식 디버깅 도구로 컴포넌트 상태, Props , 렌더링 여부 등을 확인 할 수 있다.

 

Chrome 용으로 설치

React Developer Tools - Chrome Web Store

파이어폭스 용으로 설치

React Developer Tools – Get this Extension for 🦊 Firefox (en-US)

Edge 용으로 설치

React Developer Tools - Microsoft Edge Addons

사파리는 따로 패키지를 설치 해야한다.

 

 

사이트에 접속하면 해당 이미지와 같이 확장 프로그램을 설치 할 수 있다.

 

정상적으로 설치가 되면 크롬의 기준에서 우측 상단 확장 도구 모음에 React 로고가 생긴것을 볼 수 있다.

 

<확장 프로그램>

 

이제 본격적으로 활용을 해보도록 하자

 

React 개발 도구 활용하기

React Developer Tools를 설치하게 되면 개발자 도구(F12)에서 Components와 Profiler 메뉴가 추가가 된다.

 

2-1. Components

Components 탭에서는 리액트 애플리케이션의 컴포넌트 트리를 확인 할 수 있게 되며, 단순히 구조 뿐만 아니라 props 와 내부 React hooks 등 다양한 정보를 확인할 수 있게 된다.

 

컴포넌트 데이터 로깅

클릭 한번으로 컴포넌트가 보유하고 있는 모든 데이터를 콘솔 창에 기록 할 수 있다. 이 데이터에는 props, hooks, DOM에 있는 노드, 시스템에서의 파일 위치 등 컴포넌트 관련 모든 데이터를 포함한다.

2-2. Profiler

프로파일러는 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구이다.

즉 React 애플리케이션이 렌더링 되는 과정에서 어떤 컴포넌트가 렌더링 됐는지, 몇 차례나 일어났으면 어떤 작업에서 오래 걸렸는지 등 컴포넌트 렌더링 과정에서 발생하는 일을 확인할 수 있다.

설정창에서 Highlight updates when components render 를 클릭하면 렌더링 되는 곳을 눈으로 확인할 수 있게 된다.

 

Profiler Menu 

프로파일링 메뉴는 리액트가 렌더링 할 떄 어떠한 일이 벌어지는지 확인 할 수 있는 도구다.

• 첫 번째: Start Profiling(프로파일링 시작) 버튼으로 누르면 프로파일링이 시작된다.
• 두 번재: Reload and Start profiling(새로고침 후 프로파일링 시작) 버튼 누르면 웹페이지가 새로고침되면서 동시에 프로파일링 시작
• 세 번째: Stop Profiling(프로파일링 종료) 버튼 누르면 프로파일링 된 현재 내용 모두 지움
• 네 번째: Load Profile(프로파일 불러오기) 버튼
• 다섯 번째: Save Profile(프로파일 저장하기) 버튼

 

프로파일링 결과

프로파일링을 수행한 후, 불꽃 아이콘을 누르면 렌더 커밋별로 어떤 작업이 일어났는지 나타낸다.

바가 넓을 수록 해당 컴포넌트를 렌더링하는데 오래 걸렸다는 의미이다.

 

그래프 아이콘을 누르면 해당 커밋에서 렌더링 하는데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프를 볼 수 있다.

 

달력 아이콘을 누르면 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어나는지 확인할 수 있다.

즉 시간의 흐름에 따라 작동하는 내용을 추적하는데 유용하다.

 

그 외에도 

React Strict Mode

[짤막글] react strict 모드란??

네트워크 요청 디버깅

[개발자도구] 네트워크 디버깅

React Error Boundary 활용

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기 | 카카오엔터테인먼트 FE 기술블로그

 

등이 있다.

 

🚀 디버깅, 이제는 습관이다!

사실 디버깅이라는 작업이 귀찮고 번거롭게 느껴질 때가 많다. 하지만 이번 글을 작성하면서 디버깅이 얼마나 중요한지 다시금 깨닫게 되었다. 단순히 에러를 해결하는 것뿐만 아니라, 렌더링을 최적화하고 코드의 안정성을 높이는 과정이기 때문이다.

 

앞으로는 에러가 발생했을 때 단순히 "왜 안 되지?"라는 막연한 고민을 하기보다, 더 적극적으로 디버깅 테스트를 진행하면서 문제를 파악하고 해결하는 습관을 들여야겠다.

 

🎯 디버깅을 자주 하면 얻을 수 있는 것들:
✅ 예상치 못한 버그 완화
✅ 불필요한 렌더링 보완
✅ 코드 흐름을 더 깊이 이해할 수 있는 경험

 

이제는 디버깅을 귀찮게 여기지 않고, 오히려 개발 실력을 한 단계 성장시킬 수 있는 기회라고 생각하며 적극적으로 활용해야겠다! 🛠️🔥

 

"에러는 피할 수 없지만, 디버깅 실력을 키우면 더 빠르게 해결할 수 있다!"

앞으로도 꾸준히 디버깅 습관을 들여서 더욱 탄탄한 React 코드를 작성해보자! 🚀