5. Component(2) : component표기법 - 함수형과 클래스형

명명법

---

• 카멜케이스로 표기
• 파일명은 첫글자 대문자로 표기
  
  
  
  

Component_함수형

---

함수형 컴포넌트(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;

컴포넌트 불러오기(App.js)

import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
function App() {
  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <BucketList/>
    </div>
  );
}
export default App;

Component에서 Component로 데이터를 넘겨주자!

• 함수형 컴포넌트에는 state가 없다. 클래스형에만 있음ㅇㅇ.
  (나중에 배울 React hook을 사용하면 함수형 컴포넌트에서도 state를 사용할 수 있지만, hook 없이 state를 사용할 수 없음!)

• 리액트가 DOM을 다루는 가상돔 때문

• 컴포넌트에 props를 넘겨줄 때는 아래와 같이 넘겨줍니다.

render() {
    // this 키워드를 통해 state에 접근할 수 있어요.
    console.log(this.state);
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <BucketList list={this.state.list}/>
      </div>
    );
  }

Component_클래스형

---

클래스형 컴포넌트

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        <BucketList/>
      </div>
    );
  }
}
export default App;