React Debugging Made Easier: A VSCode Walkthrough

7 min readOct 10, 2023

개발자에게 있어 디버깅은 필수적인 기술이다. React 라이브러리를 사용할 때 디버깅 도구를 잘 활용하면 버그를 빠르게 찾아 수정할 수 있어, 개발 시간을 단축시킬 수 있다. VSCode(Visual Studio Code)를 사용하여 React 에서 디버깅을 어떻게 하면 되는지 알아보자.

아래 코드는 몇 개의 컴포넌트로 구성된 간단한 React 애플리케이션으로, 아이템 목록을 표시한다. 예제는 실무에서 흔히 볼 수 있는 상황이기도 하며, 컴포넌트 내부에는 디버깅을 목적으로 의도적인 버그가 삽입되어 있다.

// ContainerComponent.tsx

import StreamComponent from "./StreamComponent";

interface DataItem {
  id: number;
  value: string;
}

const ContainerComponent: React.FC = () => {
  const [data, setData] = useState<DataItem[]>([]);

  const createData = () => {
    setData([
      { id: 1, value: "Item A" },
      { id: 2, value: "Item B" },
      // The following line is intended to cause an error for debugging purposes
      null as never,
    ]);
  };

  useEffect(() => {
    createData();
  }, []);

  return (
    <div>
      <StreamComponent data={data} />
    </div>
  );
};

// StreamComponent.tsx

import ItemComponent from "./ItemComponent";

interface DataItem {
  id: number;
  value: string;
}

interface StreamProps {
  data: DataItem[];
}

const getValues = (item: DataItem) => {
  const { id, value } = item;
  return { num: id, label: value };
};

const StreamComponent: React.FC<StreamProps> = ({ data }) => {
  return (
    <>
      {data.map((item, index) => {
        const values = getValues(item);
        return <ItemComponent key={index} {...values} />;
      })}
    </>
  );
};

// ItemComponent.tsx

interface ItemProps {
  num: number;
  label: string;
}

const ItemComponent: React.FC<ItemProps> = ({ num, label }) => {
  return <div>{`${num} : ${label}`}</div>;
};

위 코드 createData 함수에서 null 값은 의도적으로 오류를 발생시키기 위해 추가되었다. 이제 VSCode를 사용하여 이를 디버깅 하는 단계를 살펴보자.

디버깅 설정 구성

디버깅 메뉴에서 Run and Debug 버튼을 클릭하면, 어떤 환경에서 디버깅을 할지 선택하도록 목록이 표시된다.

.vscode/launch.json 설정 파일에서 로컬 서버를 실행했을 때와 동일한 URL로 설정을 해준다.

애블리케이션 실행

의도적으로 에러를 발생시키는 코드 때문에 다음과 같은 에러 메시지가 출력되었다. 에러 화면은 ErrorBoundary를 사용하여 임의의 메시지를 출력하도록 설정 하였다.

<ErrorBoundary fallback={<p>An intentional error has occurred for debugging test.</p>}>
  <ContainerComponent />
</ErrorBoundary>

예제 실행을 위해서 ErrorBoundary 는 무시하고 진행 해도 좋다.

getValues 함수에서 item이 null 이기 때문에 id 속성을 구조 분해할 수 없다는 에러가 나타났다.

해당 함수를 추적해서 vscode로 디버깅을 해보자.

브레이크 포인트 설정

getValues 함수가 실행되는 부분에 브레이크 포인트를 추가 하고 디버깅을 실행해 보자.

디버깅 모드를 활성화하면, VARIABLES > Local 섹션에서 getValues함수가 사용하는 item 값을 확인할 수 있다. 그러나 Debug toolbar에서 계속/일시중지(F5) 버튼을 클릭하여 item값이 null이 나올 때까지 기다리는 것은 비효율적 이다. 이럴 때에는 Edit BreakPoint를 사용하여 원하는 결과에 대한 조건을 설정할 수 있다.

변수 검사

위 에러 로그에서 출력된 item 값이 null 경우에 대한 조건을 추가 하고 새로 고침을 실행 하자.

item이 null인조건에 대한 값을 확인할 수 있다. 이제 CALL STACK을 통해 근본적인 원인을 찾아볼 수 있다.

단, VSCode에서 React 애플리케이션을 디버깅 할 때 CALL STACK은 실행 중인 코드의 스택 트레이스를 잘 보여주지만, 소스 맵 설정 문제나 복잡한 비동기 코드가 있는 경우 추적이 어려울 수 있다. 그래서 때로는 직접 추론을 통해서 디버깅을 해야 할 필요가 있다.