클래스형 컴포넌트와 함수형 컴포넌트

리액트는 기본적으로 단방향으로만 데이터 전송?이 가능하다

부모컴포넌트는 자식에게 데이터를 넘겨줄 수 있지만 자식컴포넌트는 부모에게 데이터를 줄 수 없다!

 

함수형 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언이 간편하다. function App() ...
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. (클래스형 컴포넌트와의 성능과 파일 크기 면에선 크게 차이가 없지만 함수형 컴포넌트가 좀 더 작음)

하지만 큰 단점이 하나 있다.

함수형 컴포넌트의 단점

• state 와 라이프사이클 API 사용이 불가능하다.

그렇지만 이 단점은 리액트 v16.8 버전 이후 Hooks 라는 기능이 도입 되면서 해결 되었다.

클래스형 컴포넌트와 똑같이 사용할 수 있는 것은 아니지만 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었으며,
리액트 공식 메뉴얼에서는 컴포넌트를 작성할 때 함수형 컴포넌트와 Hooks 를 사용하도록 권장하고 있다.

다음은 클래스형 컴포넌트의 장단점이다.

---

클래스형 컴포넌트의 장점

• state 및 라이프사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.

클래스형 컴포넌트의 단점

• 함수형 컴포넌트보다 선언이 조금 귀찮다. class App Extends Component ...
• 함수형 컴포넌트보다 메모리 자원을 좀 더 사용한다.
• 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 좀 더 크다.

함수형 컴포넌트 장점은 곧 클래스형 컴포넌트의 단점이라고 이야기 할 수 있을 것이다.

 

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {

  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기','노래 배우기'],
      //클래스형 컴퍼넌트엔 스테이트가 있지만 함수형엔 없다 리액트 훅을 사용하면 함수형도 사용가능
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() { // 렌더가 따로 있다
    console.log(this.state)
    
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
          <BucketList list={this.state.list} />
          {/* 버킷리스트 컴포넌트에 정보 넘겨주기 state를 props로 */}
      </div>
    );
  }
}
// 클래스 형 컴포넌트는 조금 더 세세하게 이 컴포넌트가 어떻게 할건지 나눠져 있음
export default App;

BucketList.js

// 리액트 패키지를 불러옵니다.
import React from 'react'; 

// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
//     return (
//         <div>버킷 리스트</div>
//     );
// }

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = ({list}) => {
    
    // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
    const my_lists = list;

    

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            {
                // js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요. 
                // 자세한 사용법은 아래 링크를 확인해주세요.
                // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
                my_lists.map((list, index) => {
                    // 콘솔을 확인해봅시다 :)
                    console.log(list, index);
                    return (<div key={index}>{list}</div>);
                })
            }
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;