• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

문법?? 질문드려요

22.01.24 14:49 작성 조회수 189

1

const CategoryList: FunctionComponent<CategoryListProps> = function ({
  selectedCategory,
  categoryList,
}) {
  return <div />
}
<CategoryListProps> = function
여기서 이렇게 function 을 써주는것과 바로
<CategoryListProps> = () => { 


}

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

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

답변 1

답변을 작성해보세요.

0

안녕하세요, French님!

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

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

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

 

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

 

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

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