기능적 구성 요소에 반응: const 대 function

저는 최근에 우리 앱의 성능을 최적화해 왔으며 따라서 Javascript의 핵심에 빠져들고 있습니다. 내가 생각한 것 중 하나는 다음과 같이 구성 요소를 선언하는 것 사이에 실질적인 차이점이 있는지 여부입니다.

const MyComponent = () => {
    return(
      ..
    )
}

대

function MyComponent() {
    return(
      ..
    )
}

이 형식에서는 function 구문이 약간 더 짧습니다.

그리고?

때때로 다음과 같이 화살표 함수를 작성할 수 있습니다.

const MyComponent = () => (...)

화살표 뒤에 일반 괄호를 넣으면 return 를 쓸 필요가 없습니다. 그래서 우리가 즉시 돌아올 수 있다면 더 짧습니다.

그리고?

사람들이 이야기하는 또 다른 것은 구성 요소의 export입니다.

export default function MyComponent() {}

대

const MyComponent = () => {}

export default MyComponent

함수 구문은 기본 구성 요소를 제자리에 내보낼 수 있는 기능을 제공합니다.

그리고? (내 차 팬 어디 있어?)

게양

내가 찾을 수있는 가장 큰 이유는 게양 때문입니다. 유효한 구문이 있는 예를 살펴보겠습니다.

// I like to write my components before I use them

const MyComponent = () => {}

const AlsoMyComponent = () => {}

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)

그리고? 잘못된 구문을 살펴보겠습니다.

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

const MyComponent = () => {}

const AlsoMyComponent = () => {}

이 예제 👆는 린터를 사용하여 오류를 발생시킵니다. 컴포넌트는 선언되기 전에 사용되기 때문입니다.

따라서 구성 요소를 맨 아래에 유지하고 선언되기 전에 사용하려는 경우 함수 구문으로 작성하여 파일의 맨 위로 끌어올릴 수 있습니다.

 const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

function MyComponent() {}

function AlsoMyComponent() {}

이 예제 👆는 린터를 사용하지 않습니다. 파일을 실행할 때 JavaScript 엔진에 다음과 같이 표시되기 때문입니다.

// Components are hoisted to the top.

function MyComponent() {}

function AlsoMyComponent() {}

 const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom

👀 where did they go?

그리고?

그게 다야! 제 생각에는...? 저와 다른 생각이 있으시거나 더 많은 차이점을 알고 계시다면 알려주세요!