React 애플리케이션을 개발하면서 예외(Exception)은 피할 수 없는 일입니다. 예외는 코드에서 발생하는 오류나 문제를 나타내며, 오류의 원인을 파악하고 수정하는 과정에서 중요한 역할을 합니다. 이번 포스팅에서는 React 애플리케이션에서 자주 발생하는 10가지 예외와 그에 대한 해결 방법을 알아보겠습니다.
Exceptions
Cannot read property ‘X’ of undefined
이 예외는 객체나 배열의 속성에 접근하려 할 때 해당 객체나 배열이 정의되어 있지 않아 발생합니다. 해결 방법은 해당 객체나 배열이 정의되었는지 확인하거나, 조건문으로 안전하게 접근하는 것입니다.
Component is not defined
컴포넌트를 정의하지 않고 사용하려고 할 때 발생합니다. 컴포넌트가 올바르게 임포트되었는지 확인하고, 이름을 제대로 입력했는지 확인하세요.
Maximum update depth exceeded
이 오류는 무한한 렌더링 루프가 발생하여 스택 깊이를 초과했을 때 나타납니다. 무한 루프를 방지하려면 setState나 Hook을 사용할 때 주의하고, 조건문으로 불필요한 렌더링을 줄이세요.
Invariant violation
React 내부에서 사용되는 조건이 만족되지 않을 때 발생하는 오류입니다. 주로 올바르지 않은 사용법으로 인해 발생하는데, React 공식 문서를 참조하여 올바른 사용법을 확인하세요.
Rendered more hooks than during the previous render
Hook 규칙을 어기거나 조건에 따라 다른 수의 Hook을 사용할 때 발생합니다. 조건에 맞게 Hook을 사용하고, 조건문 안에서 Hook 사용을 피하도록 주의하세요.
Expected to return a value at the end of arrow function
화살표 함수 내에서 값을 반환하지 않았을 때 발생하는 오류입니다. 함수 내에서 값을 명확히 반환하거나, 필요 없는 화살표 함수를 줄이세요.
Invalid prop ‘X’ of type ‘Y’ supplied to ‘Component’
부모 컴포넌트에서 자식 컴포넌트로 전달된 prop의 유형이 예상과 다를 때 발생합니다. prop의 유형을 확인하고 맞게 전달하세요.
Each child in a list should have a unique “key” prop
컴포넌트가 반복적으로 렌더링될 때, 각 요소에 고유한 key prop이 지정되지 않았을 때 발생합니다. key를 사용하여 컴포넌트의 변경을 추적할 수 있도록 하세요.
TypeError: Cannot read property ‘map’ of undefined
map 함수와 같은 배열 메서드를 정의되지 않은 배열에 사용하려 할 때 발생합니다. 배열이 정의되어 있는지 확인하고, 데이터가 비어있지 않은지 검사하세요.
Failed to compile
프로젝트를 빌드하거나 실행할 때 발생하는 컴파일 오류입니다. 주로 파일 경로 문제나 코드 구문 오류가 원인이며, 개발 환경을 확인하여 해결하세요.