문법?? 질문드려요

인프런 커뮤니티 질문&답변

작성한 질문수

React 기반 Gatsby로 기술 블로그 개발하기

카테고리 목록 컴포넌트 구현하기

작성

258

const CategoryList: FunctionComponent<CategoryListProps> = function ({
  selectedCategory,
  categoryList,
}) {
  return <div />
}

<CategoryListProps> = function
여기서 이렇게 function 을 써주는것과 바로

<CategoryListProps> = () => {

}

이렇게 해주는문법에 차이가있나요?? 저는 아래처럼 사용했는데

자세히 강의글 읽어보니 좀 다르네요 두가지문법 아직 제로컬에서는 에러가 나지는 않지만 차이가있는지 궁금합니다.

답변 1

지식공유자

안녕하세요, French님!

두 방법은 모두 문법 상에 오류가 없을 뿐더러 기능 상에서도 차이점이 존재하지 않습니다.

어떤 방식을 사용하든 상관없습니다!

대신 에어비앤비에서 제공하는 리액트 코딩 컨벤션에 따르면 아래와 같이 작성하는 것을 권장하고 있습니다.

function CategoryList({ selectedCategory, categoryList }: CategoryListProps) { ... }

저 두 방법은 모두 익명 함수를 변수에 할당하는 방법이기 때문에 권장하지 않는다고 나와있습니다.

그래서 에어비앤비 컨벤션에 따르면 함수에 이름을 부여한 기명 함수의 사용을 추천하고 있으니 저렇게 작성해보는 것도 도움될 것 같네요 :)

작성한 질문수