Chapter3 - 함수형 Component와 export, import 방법 2가지

BucketList.js

// 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 function Bucketlist(props){ return ( <div>버킷 리스트</div> ); } // 이렇게 쓸 수도 있다.  =>가 들어간 함수를 화살표 함수라고 한다. // () 안에 props! 부모 컴포넌트에게 받아온 데이터이다. // js 함수가 값을 받아오는 것과 똑같이 받아온다. const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 부른다.)를 반환해준다. return ( <div> 버킷 리스트 </div> ); }   // 우리가 만든 함수형 컴포넌트를 export 해준다. // export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있다. export default BucketList;

 

export, import 방법 2가지

 

1. BucketList.js에서 밑에와 같이 export를 하면 App.js에서 두번째와 같이 import 할 수 있다.

 

2.

 

이 두 방법의 차이는 중괄호를 쓰냐 안쓰냐의 정도로 이해하면 된다.