inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

576

최선재

작성한 질문수 2

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번 방법인 함수 선언식 호이스팅에 영향을 받는다
 

기초 react javascript

답변 1

0

진유림

맞습니당 ㅎㅎ

 

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

export default function MyComponent() 

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

 

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

 

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

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

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

API 적용 안되는 코드 수정 방법입니다.

0

71

1

고양이 이미지가 엑박이 뜨네요

0

51

1

npx 명령어 사용 불가

1

75

1

const 변수와 컴포넌트의 차이

0

89

1

강의노트

0

139

1

vite로 리액트 빌드한 후 깃허브에 배포하는 방법

0

325

1

빌드할때 dist 폴더가 만들어지는데요,

0

768

1

js파일 업로드 요청

0

135

1

변경된 api 사용시 text 안나오는 문제

0

142

1

메인글자수정...

1

269

3

디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?

1

310

1

https://cataas.com/undefined 로 나오는데 왜그런건가요?

1

594

4

고양이 사진이 깨져요.ㅜㅜ

2

359

3

강의 노트 위치를 모르겠습니다

1

343

1

깃 강의노트 어디서 볼 수 있나요?

1

381

2

이해가 안되는 부분이 있어요

1

360

1

api가 안불러와지네요...

1

658

4

진유림 선생님 너무 궁금해서 질문드립니다 ㅜ

1

331

2

react에서 컴포넌트 만들 때 대문자를 쓰는 이유

2

1154

2

https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ

1

331

2

index.js 내용이 바꼈네용

1

319

2

프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.

1

261

2

html 코드 오류

1

463

2

고양이 이미지 깨져요

1

338

2