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

목차

· 원인

· 함수 유형 구분

· 해결 방법

· 레퍼런스

---

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

ESLint를 연결해주는 과정에서, 마주한 에러이다. 함수는 올바르게 작성을 했지만 ESLint 설정 과정에서 함수에 관련된 규칙을 빼먹은 것 같아 구글링을 진행하고 이에 따른 해결방법을 포스팅을 했다.

 

원인

리액트에서는 공식문서에서도 나왔듯이 클래스형 컴포넌트보다 요즘 많이 찾는 보통 함수형 컴포넌트를 사용한다. ESLint react/function-compoent-definition 규칙을 사용한다면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고 rules에 명시해두어야 에러가 발생하지 않는다.

함수 유형 구분

· 함수선언식

// 기명
function hello() {}

// 익명
(function () {})

· 함수표현식 (변수에 함수를 담는다)

// 익명
const hello = function() {}

// 기명
const hello = function world() {}

함수표현식에는 화살표 함수라는 것이 존재한다. 화살표 함수 (arrow function)은 함수 표현식을 좀 더 간편하게 사용할 수 있게 해준다. function 키워드가 생략되며, 익명 함수로만 사용할 수 있다.

const hello = () => {} // 올바른 사용 예
const hello = world() => {} // 잘못된 사용 예

해결 방법

함수용 컴포넌트에 대한 함수 유형을 ESLint에 지정(명시)해주어야한다.

// 1번 타입, 기명 함수 선언식 컴포넌트
// [2, {"namedComponents": "function-declration"}]
function Component (props) {
	return <div/>;
};

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

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

// 4번 타입, 익명 함수 표현식 컴포넌트
// [2, {"unnamedComponents": "function-expression"}]
function getComponent () {
	return function(props) {
    	return <div/>;
    };
};

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

위 5가지 함수 구성 중에서 사용하고 싶은 구성을 .eslintrc 파일의 rules에 적어준다. 보통은 1번과 3번 타입을 사용하기 때문에 아래와 같이 작성을 해주며 규칙을 명시해주었다.

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

기본적인 옵션 지정에 대한 템플릿이다, 작성 시에 아래와 같은 규칙을 따른다.

"react/function-component-definition":[
      <규칙사용여부옵션>, 
      { 
      	// 기명 함수 옵션
     	"namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array<"function-declaration" | "function-expression" | "arrow-function">,
        // 익명 함수 옵션
  		"unnamedComponents": "function-expression" | "arrow-function" | Array<"function-expression" | "arrow-function"> 
      }
    ],

TypeScript를 사용하는 경우, Auto ESLint Fix가 적용이 안될 수도 있다고 한다, 이럴 때는 수동으로 에러코드를 통해 변경해줘야한다.

---

레퍼런스

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