Component - 함수형

함수형 Component 는 두가지 형태로 사용할 수 있다.

 

BucketList.js

import React from 'react'; 

function Bucketlist(props){
    return (
        <div>버킷 리스트</div>
    );
}

const BucketList = (props) => {
    return (
        <div>
            버킷 리스트
        </div>
    );
}

- return :  컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환

- =>가 들어간 함수를 화살표 함수라고 불러요.

- ( ) 안에 props : 부모 컴포넌트에게 받아온 데이터 - js 함수가 값을 받아오는 것과 똑같이 받아온다.

export default BucketList;

- 우리가 만든 함수형 컴포넌트를 export 해준다.
- export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있다.

 

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BucketList from './BucketList';

function App() {
  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      {/* 컴포넌트를 넣어준다. */}
      <BucketList/>
    </div>
  );
}

export default App;

- BucketList 컴포넌트를 import 한다.
- import [컴포넌트 명] from [컴포넌트가 있는 파일경로];