[ESLint] ESLint - Function component is not a function declaration Error

[ESLint] ESLint - Function component is not a function declaration Error

[ESLint] ESLint - Function component is not a function declaration Error

 

 

 

 

.esLintrc.js 파일에서 에러 발생

 error  Function component is not a function declaration eslint (react/function-component-definition)

 

발생 사유 : 화살표 함수로 생성된 함수형 컴포넌트에 대한 오류

 

 

 

 

 

...
"react/function-component-definition": [<enabled>, {
	// 기명 함수 옵션
  "namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array<"function-declaration" | "function-expression" | "arrow-function">,
	// 익명 함수 옵션
  "unnamedComponents": "function-expression" | "arrow-function" | Array<"function-expression" | "arrow-function">
}]
...

 

 

 

 

컴포넌트 함수 유형별 옵션

// 기명 함수 선언식 컴포넌트 사용시
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
  return <div />;
}

// 기명 함수 표현식 컴포넌트 사용시
// [2, { "namedComponents": "function-expression" }]
const Component = function (props) {
  return <div />;
};

// 기명 화살표 함수 컴포넌트 사용시
// [2, { "namedComponents": "arrow-function" }]
const Component = (props) => {
  return <div />;
};

// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
  return function (props) {
    return <div />;
  };
}

// 익명 함수 표현식 컴포넌트 사용시
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}

// 익명 화살표 함수 컴포넌트 사용시
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}

 

 

 

나는 이렇게 작성해주니 에러가 사라졌다.

"rules": {
	"react/function-component-definition": [
      2,
      { namedComponents: ["arrow-function", "function-declaration"] },
    ],
}

 

 

 

 

 

 

---

 

 

 

 

 

참고자료

 

ESLint 공식문서

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint

 

 

 

참고 블로그

https://velog.io/@nemo/Function-component-is-not-a-function-declaration

[에러 일지] ESLint - Function component is not a function declaration

 

 

 

https://velog.io/@han1368/ESLint-%EC%A0%81%EC%9A%A9-%EC%8B%9C-%EC%83%9D%EA%B8%B4-%EC%9D%B4%EC%8A%88Function-component-is-not-a-function-declaration

ESLint 적용 시 생긴 이슈_Function component is not a function declaration