Airbnb (react/function-component-definition)

개요

airbnb 가이드 스타일로 eslint를 셋업하고 Next.js page 구성 요소를 구현하기 위해 화살표 함수를 사용하니 eslint 에러가 발생했습니다.

const HomePage: NextPage = () => (
  <div>
    <div>HomePage</div>
  </div>
);

 

크리티컬한 이슈 내용은 아니지만 소소하게 정리하려 합니다.

function-component-definition

airbnb는 이름 추론을 이유로 화살표 함수보다 함수 선언을 선호한다.

 

어떤 내용인지 보겠습니다.

const add = (a, b) => a + b;

 

여기서는 함수의 이름이 없습니다.

 

함수를 정의하는 것과 동시에 add 라는 변수에 할당되었습니다.

 

화살표 함수는 보통 익명 함수로 사용되며, 변수에 할당된 이름을 통해 호출됩니다.

function subtract(x, y) { return x - y; }

 

함수 선언문은 subtract 라는 이름이 함수 이름으로 명시되어 있습니다.

 

Airbnb는 이러한 이름 추론이 코드의 가독성과 디버깅을 어렵게 만들 수 있다고 생각합니다.

 

특히, 화살표 함수의 경우 익명 함수로 사용되기 때문에 디버깅 시 함수 이름을 보여주는 stack trace가 제대로 표시되지 않을 수 있습니다.

 

가독성과 디버깅 용이성을 위해 함수에 이름을 명시적으로 지정해주는 것이죠.

 

저는 여기서 NextPage 타입이 함수 선언문과는 호환되지 않는 타입이라는 문제가 있었습니다.

 

NextPage는 React의 ComponentType을 확장한 타입이기 때문에 아래와 동일하게 일반적 함수 선언문에서는 사용할 수 없습니다.

function HomePage(): React.FunctionComponent {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

 

airbnb 스타일 가이드를 정확히 따라가려면 다음과 같이 수정이 필요합니다.

function HomePage(): React.ReactElement {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

 

암시적 타입(JSX Element) 추론이 되기 때문에 ReactElement 는 붙이지 않아도 무방합니다.