프로젝트를 진행하면서 마주한 여러 오류들에 대한 기록.
재차 마주칠 것을 대비해서 정리해보자!

React-Query

1. No QueryClient set, use QueryClientProvider to set one 에러

원인

• 최상위 컴포넌트를 <QueryClientProvider client={queryClient}>로 감싸주지 않아 발생한 오류.

해결방법

• React Query는 QueryClientProvider 컴포넌트를 사용해 QueryClient 인스턴스를 제공한다.
• QueryClientProvider는 React Query 훅과 컴포넌트에서 QueryClient 인스턴스에 접근할 수 있게 만드는 역할을 한다.

  react-query의 작동 방식에 대해 더 자세히 알아보기 : [LINK]

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 기타 컴포넌트들 */}
    </QueryClientProvider>
  );
}

ESLint

2. missing in props validation 에러

원인

• React에서는 부모-자식 컴포넌트 간의 데이터 전달을 위해 props를 사용하는데, 이때 prop를 사용하는 컴포넌트에서는 prop에 대한 유효성 검사가 권장된다.
• 이러한 컴포넌트의 prop 유효성 검사(prop validation)가 누락되었을 때 발생하는 오류.

해결 방법

• eslint의 규칙을 수정하는 방법
  eslint.json에서 "react/prop-types": ["off"]을 추가하면 해결할 수 있다.
• propTypes를 사용해 컴포넌트에 전달되는 prop를 검사하는 방법
  propTypes를 정의하면 컴포넌트에 전달된 프롭스에 대한 유효성 검사 규칙을 지정할 수 있다.
  이를 통해 프롭스의 타입(type), 필수 여부(required), 기본값(default) 등을 지정한다.
  해당 방법을 사용하려면 prop-types 패키지를 설치해야 한다.

import PropTypes from 'prop-types';

const MyComponent = ({ value }) => {
  return <div>{value}</div>;
};

MyComponent.propTypes = {
  value: PropTypes.string.isRequired,
};

export default MyComponent;

위 코드는 propTypes를 사용해 value 프롭스의 타입을 string으로 지정, isRequired를 사용하여 필수 프롭스임을 설정하고 있다. 이로써 해당 컴포넌트를 사용할 때 value 프롭스가 누락되거나 타입이 잘못된 경우 경고가 표시된다.

3. A form label must be accociated with a control 에러

원인

• 폼 요소(<input>, <select>, <textarea> 등)와 라벨(<label>)이 연결되지 않았을 때 발생하는 오류.

해결방법

• htmlFor 속성을 사용해 label과 폼 요소의 id를 연결해주어야 한다.

<label htmlFor="nameInput">Name:</label>
<input type="text" id="nameInput" />

• 그러나 label과 폼 요소를 연결했음에도 에러가 발생하는 경우가 있다.
  내가 이 경우에 해당했는데 해당 블로그에서 같은 에러를 겪은 분의 해결 방법을 볼 수 있었다. React와 같은 SPA 라이브러리에서는 컴포넌트 재사용으로 인해 id의 유일성을 보장하지 못하기 때문에 추가적인 옵션이 필요하다는 분석을 통해 아래와 같은 방법을 사용하셨고, 나 또한 이를 적용하여 해결이 되었다!

/* .eslintrc.json */

{
	// ...
  "rules": {
		// ...
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "labelAttributes": ["htmlFor"]
      }
    ]
  }
}

4. Function component is not a function declaration 에러

원인

• 화살표 함수 사용으로 발생한 오류.

해결 방법

eslintrc.json의 rules에 react/function-component-definition을 추가하여 함수형 컴포넌트의 정의 방식을 지정한다.

rules:{
	'react/function-component-definition':[2, {namedcomponents:'arrow-function'}]
}

참고 글: [LINK]