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

안녕하세요!

React 와 Next 의 component 선언 방식에 대한 convention 이 궁금하여 질문드립니다.

Arrow Function vs Regular Function

Component 는 사실 하나의 함수입니다. 그리고 JavaScript 에서는 2가지 방식으로 함수를 선언할 수 있습니다. 하나는 화살표 함수이고 또 다른 하나는 function keyword 를 사용하는 것입니다.

이 두 함수 선언 방식의 차이에는 크게 hoisting 과 this keyword 가 있습니다. 궁금하신 분들은 Arrow Functions vs Regular Functions in JavaScript – What's the Difference? (freecodecamp.org) 를 읽어보시면 좋을 것 같습니다. 이번 질문은 기능상의 차이 보다는 "일반적으로" 무엇을 사용하느냐 에 대한 질문입니다.

Q. React 에서는 component 를 선언할 때 arrow function 을 일반적(많은 개발자들이 사용)으로 사용하는 것으로 알고 있습니다. Next 는 arrow function 를 일반적으로 사용하나요 아니면 regular function 을 사용하나요?

Arrow Function Component

interface ComponentProps { ... }

const Component = ({ ... }: ComponentProps) => { ... }

export default Component;

Regular Function Component

interface ComponentProps { ... }

export default function Component({ ... }: ComponentProps) {
  ...
}

제가 생각했을 때는 export default 를 한번에 사용하기 위해서 regular function 으로 공식 문서나 강의 자료가 작성되어 있는 것으로 생각이 되어지는데, 더 일반적인 선언 방식은 무엇일까요? 물론 convention 이라는 게 없을 수도 있고 사실 프로젝트마다 다르게 정할 수는 있겠지만, 더 일반적인 방식이 무엇인지 궁금하여 질문드립니다.