class component vs function component

1. react component

리액트 컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위로써, 웹 페이지를 독립적으로 구성된 컴포넌트를 통해 재사용 하여 구성한다.

컴포넌트는 데이터를 입력받아 컴포넌트 내에 작성된 JSX 문법에 따라 화면에 출력시킨다.

2. class component

대부분 함수형 컴포넌트를 사용하지만, 클래스형 컴포넌트를 어쩔 수 없이 써야하는 상황이 나올 수 있다.
프로퍼티,상태,생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

import React, { Component } from 'react'

export default class Hello extends Component {
  render() {
    return (
      <div>Hello Im ClassComponent</div>
    )
  }
}

클래스형 컴포넌트에는 render()메소드가 반드시 있어야하며, 이 메소드에서 렌더링하고싶은 JSX를 반환하면 된다.

또한 props를 받고싶을땐 this.props 를 사용하면 된다.

/* app.js */
import Hello from './Hello';
function App() {

  const users ={
    username:"hello",
    userage:25
  }

  return (
    <div className="App">
      <Hello users={users} />
    </div>
  );
}

export default App;

app.js에서 users라는 배열을 Hello component에 넘겨준 뒤,

/* Hello.js */
import React, { Component } from 'react'

export default class Hello extends Component {
  render() {
    const users = this.props.users;
    console.log(users);
    return (
      <div>Hello Im ClassComponent</div>
    )
  }
}

위와같이 this.props로 전달받아서 사용하면 된다.

3. function component

가장 보편화된 컴포넌트 정의방법은 함수형 컴포넌트다.

import React from 'react'

function Hi(props) {
    const data = props.users;
  return (
    <div>User name is {data.username}</div>
  )
}

export default Hi

클래스 컴포넌트와는 달리 함수형 컴포넌트에선 프로퍼티에 props를 받아서 사용한다.

컴포넌트 함수를 다 작성한 뒤는 export default를 통해 다른 컴포넌트에서도 사용할 수 있게 해준다.