[React] Component

📍 What is Component?

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 첫글자는 대문자로 시작한다 (소문자로 시작하는 컴포넌트를 DOM html 태그로 인식하기 때문)
• 컴포넌트를 다른 컴포넌트에 넣을 수도 있음.
• 함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.
• props를 입력받아 view상태에 따라 DOM Node를 출력
• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다

function App() {
  return (
    <div>
      <h1>hello world</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta dolor,
        excepturi dolorum, asperiores voluptatibus quis quae, tempore fugiat
        dolores minus iusto culpa eveniet id veniam molestiae animi! Commodi,
        nihil minus.
      </p>
      <ExpenseItem />
    </div>
  );
}

컴포넌트의 장점

• small and manageable
• build a complex user interface
• use anywhere in React application
• Reusability → DRY

1. 함수 컴포넌트

function 으로 정의하고 return 문에 jsx 코드를 반환.

arrow function으로 정의한다

import React from "react";
import "./App.css";

const NameBox = () => {
  const name = "test";
  return <div>{name}</div>;
};

export default NameBox;

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 props라는 객체 인자를 인수로 받은 후, React element를 반환한다.

2. 클래스 컴포넌트

class를 정의하고 render()함수를 이용해서 jsx를 반환한다

import React, { Component } from "react";

class NameBox extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default NameBox;