• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

기복적인 질문입니다ㅠ 함수 표현식 vs 함수 선언식(해결)

22.06.16 13:47 작성 조회수 341

1

function App() {
return (
<MyName first={'홍'} last={'길동'}/>
);
}

export default App;
-------------------------------------------------------------------
질문 : App.js 에서 MyName이라는 컴포넌트를 사용하려고 할 때 이렇게 두가지 방법이 있는데 차이점이 있나요? 어떤것이 더 좋은 방법인가요?
// 1번 방법
const MyName = ({first, last}) => {
return(
<div>
성은 '{first}'고, 이름은 '{last}'입니다.
</div>
)
}
export default MyName;

// 2번 방법
function MyName({first, last}) {
return(
<div>
성은 '{first}'고, 이름은 '{last}'입니다.
</div>
)
}

export default MyName;
궁금증 해결
1번 방법인 함수 표현식은 호이스팅에 영향을 받지 않고 2번 방법인 함수 선언식 호이스팅에 영향을 받는다
 
course-thumbnail

만들면서 배우는 리액트 : 기초

답변 1

답변을 작성해보세요.

0

진유림님의 프로필

진유림

지식공유자

2022.07.06

맞습니당 ㅎㅎ

 

저는 개인적으로 2번 방법인 선언식을 더 선호하는데 이유는

export default function MyComponent() 

와 같이 선언과 default export 를 한 번에 할 수 있기 때문입니다.

 

export default const MyComponent () => // 이건 에러나요.

 

하지만 High Order Component 등을 써야할 때는 

표현식을 써야 더 문법이 간단해지기 때문에

때에 따라 유연하게 사용하고 있어요~

이 글과 비슷한 Q&A