인프런 커뮤니티 질문&답변
작성한 질문수
기복적인 질문입니다ㅠ 함수 표현식 vs 함수 선언식(해결)
작성
·
483
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번 방법인 함수 선언식 호이스팅에 영향을 받는다
답변 1
0
진유림
지식공유자
맞습니당 ㅎㅎ
저는 개인적으로 2번 방법인 선언식을 더 선호하는데 이유는
export default function MyComponent()
와 같이 선언과 default export 를 한 번에 할 수 있기 때문입니다.
export default const MyComponent () => // 이건 에러나요.
하지만 High Order Component 등을 써야할 때는
표현식을 써야 더 문법이 간단해지기 때문에
때에 따라 유연하게 사용하고 있어요~