값이 안 들어올 때 체크하기

컴포넌트에 값이 안들어오는건지 먼저 확인(코드)

리액트 컴포넌트에서 값을 받아오는 부분이 정상적으로 작동하지 않는 경우, 가장 먼저 해야 할 일은 해당 값이 실제로 컴포넌트에 전달되고 있는지 확인하는 것이다. 이때 보통 console.log를 사용하게 된다.

console.log 예시
useEffect(() => {
  console.log('Received data:', props.data);
}, [props.data]);

이 방법의 경우 콘솔을 사용하면 값을 볼 수 있으나, 매번 console.log를 찍어줘야 한다는 문제가 있다.

이를 웹 브라우저의 DevTools를 통해서 해결할 수 있다.

먼저 로컬의 웹 브라우저에서 F12를 통해 디버그 모드를 출력한다. 이후 [소스] 메뉴에 들어가 원하는 컴포넌트 파일을 연다. 소스 코드의 줄을 선택하고, 왼쪽의 라인을 클릭하면 해당 부분에 breakpoint가 설정되고 디버거를 사용할 수 있다.

해당 이미지는 예시로, 들어온 값을 로컬을 통해 확인하는 방법을 보여준다.

네트워크에서 API 를 요청했을때 아예 안들어오는 경우 체크하기

브라우저 DevTools에서 네트워크 URL 차단을 활성화하여 확인할 수 있다.

1. DevTools 열기: 브라우저에서 F12를 눌러 DevTools를 연다.
2. 네트워크 탭 선택: 네트워크 탭으로 이동한다.

3. URL 차단 설정: 원하는 fetch 네트워크 요청을 선택하고 오른쪽 클릭하여 "Blocked URLs" 섹션에 차단하고 싶은 URL을 추가한다.

이 설정을 통해 특정 네트워크 요청을 차단하고, 요청이 실패했을 때 페이지가 어떻게 반응하는지 확인할 수 있다.

차단된 상태에서 화면 확인

네트워크 요청을 차단한 상태에서 페이지를 새로 고치고, 값이 들어오지 않을 때 어떤 버그가 발생하는지 확인할 수 있다.

해당 부분을 확인한 후, 방어 코드를 작성하여 이러한 상황을 처리할 수 있다.

// 방어코드 예시
if (!scheduleTaskList || !robotList) {
    return <LoadingSpinner />;
  }

이러한 과정을 통해 리액트 컴포넌트에서 값이 제대로 전달되지 않는 문제를 효과적으로 진단하고 해결할 수 있다.