[React] React 디버깅

리액트 에러 발생

React server를 실행하고 있을 때, 콘솔에서 에러 코드가 나오지만 웹페이지에서도 콘솔창과 동일한 에러 코드가 나옵니다.

에러코드와 함께 해결할 수 있는 방향을 제시해줍니다. 해당 에러 코드 조각과 해결 방안을 통해 프로그램을 디버깅* 할 수 있습니다.

이렇기 때문에 항상 콘솔에 나오는 에러 코드를 확인해야 합니다.

자주 발생하는 에러

JSX 요소 규칙

• JSX로 작성한 요소를 하나의 루트 요소로 감싸주어야 합니다.
• 이때, 쓸모없는
• 태그로 감싸줄 시 디자인 요소에 방해가 될 수 있습니다.
• 이것은 React.fragment(<></>)를 사용하여 하나의 루트 요소로 감싸주어 에러를 해결할 수 있습니다.

함수명 오타

• State를 관리하는 함수를 자주 사용해야 하는 만큼 함수명이 많아짐에 따라 오타를 잘 체크해야 합니다.

코드의 흐름 및 경고 분석

• 컴파일 오류를 일으키지 않아 에러 코드를 볼 수 없는 경우가 있습니다. 이러한 경우 코드 로직을 하나씩 찾아가며 체크를 해야 합니다.
• 코드 로직을 하나하나 찾아가면 시간이 많이 걸리기 때문에 다른 방법으로 개발자 도구를 켜서 Console 창을 확인하면 어떠한 경고가 나오고 있는지 어떤 파일의 몇 번째 줄에 문제가 있는지 알 수 있습니다.

중단점(breakpoint) 작업하기

• 개발자 도구의 Source 탭에 가면 소스파일이 있는 경로를 확인할 수 있습니다.
• 확인하고 싶은 파일을 클릭하여 파일을 실행시키고 코드를 선택한 부분에서 작업을 정지할 수 있으며, 함수의 흐름에 따라 코드를 찾아가며 확인할 수 있습니다.
• Source탭에서 나온 코드를 수정하여 에러의 유무를 확인할 수도 있습니다.

React DevTools 사용하기

• 크롬에서 사용할 수 있는 플러그인 중 React Developer Tools을 사용하면 컴포넌트의 트리 구조를 볼 수 있습니다.
• 해당 컴포넌트를 클릭하면 props로 넘어오는 값과 각종 요소를 확인할 수 있습니다.
• 특히 가장 좋은 부분은 state의 값을 확인할 수 있다는 것입니다.

*디버깅?

프로그램 개발 단계 중에서 발생하는 오류나 버그를 찾아내고 그 원인을 밝히고 수정하는 작업입니다.

참고자료

• udemy: 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript