NextPage 함수형 컴포넌트는 어떻게 작성해야 할까?

일단 CNA 에서 제공하는 예제에서는 NextPage 컴포넌트 생성시 화살표 함수를 사용하고 있다. 그런데 리액트에서 함수형 컴포넌트 생성시에는 함수선언문이 선호된다고 한다.

https://velog.io/@velopert/create-typescript-react-component

 

통일을 위해 NextPage 컴포넌트 생성시에도 함수선언문을 사용하는게 좋을 거 같긴한데 궁금한 점.

 

1. 리액트에서 함수형 컴포넌트 생성시 왜 함수선언문이 선호되는걸까? 위 링크에서도 자세한 이유는 설명하지 않고 그냥 해외 유명 개발자들이 그렇게 사용한다고 안내하고 있다. 구체적인 이유를 알고 싶다..

 

2. NextPage 컴포넌트의 경우 화살표 함수를 변수에 담아서 그것을 리턴하고 있는데 변수 타입을 NextPage로 지정하고 있다. 만약 함수선언문으로 정의할 경우 변수에 담을 수 없는데 어쩌지? 리턴하는 값이 반드시 NextPage 타입이어야 하는 이유가 있나?

 

생각나는 이유로는 서버사이드 랜더링 시 사용되는 getInitialProps 인데 이는 NextPage 함수형 컴포넌트를 통해 호출하는 방식이기 때문에 Typescript 코드 작성시 타입을 지정해 주는 경우이다.

 

하지만 Next.js 9.3 버전부터는 getServerSideProps 가 사용되고 이는 NextPage 함수형 컴포넌트를 통해 호출하는 방식이 아니라 그냥 해당 명칭을 가진 함수를 만들어서 export 하는 방식이기 때문에 굳이 타입 지정이 필요없다.

 

좀 더 서칭을 해보니 아래와 같은 방식으로 많이들 사용하는 것 같다.

1. 함수형 컴포넌트에서 jsx 를 리턴하는 default export 함수는 함수선언문으로 정의한다.

2. 그 외 함수들은 화살표 함수를 사용한다.