React Component와 Props

Component

- React는 Component기반의 라이브러리이다.
- 웹 페이지에서 Component화면을 이루는 작은 요소들이다.
- Components는 여러 화면에서 사용될 수 있다.
- 재사용성을 가지고 있다.

만일 하나의 페이지를 리액트로 만든다면 여러개의 컴포넌트가 모여서 하나의 페이지를 만든다.

컴포넌트 종류

1. 클래스형 컴포넌트

import React, { Component } from "react";

export default class Class extends Component {
  render() {
    return <h1>Class</h1>;
  }
}

• 더 많은 기능 제공
• 더 긴 코드 양
• 더 복잡한 코드
• 더딘 성능

2. 함수형 컴포넌트

const Component = () => {
  return <h1>Function</h1>;
};

export default Component;

• 더 적은 기능 제공
• 짧은 코드 양
• 더 심플한 코드
• 더 빠른 성능

컴포넌트 모습

const Component = () => {
  return (
    <div>
      <h1>프로그래밍</h1>
      <ul>
        <li>C</li>
        <li>Python</li>
        <li>Java</li>
      </ul>
    </div>
  );
};

컴포넌트 안에 하위 컴포넌트를 사용한 모습

import React from "react";
import Python from "./Python";
import C from "./C";
import Java from "./Java";
const Component = () => {
  return (
    <div>
      <h1>프로그래밍</h1>
      <ul>
        <C />
        <Python />
        <Java />
      </ul>
    </div>
  );
};

export default Component;

const C = () => {
  return <h1>C</h1>;
};

export default C;
//C

const Python = () => {
  return <h1>python</h1>;
};

export default Python;
//Python

const Java = () => {
  return <h1>JAVA</h1>;
};

export default Java;
//Java

Props

• 상속하는 부모의 컴포넌트로 부터 자녀 컴포넌트에 데이터등을 전달하는 방법

import React from "react";
import Program from "./Program";
const Component = () => {
  const data = [
    { id: 1, name: "C" },
    { id: 2, name: "Python" },
    { id: 3, name: "Java" },
  ];
  return <Program data={data} />;
};

export default Component;

• 하위 컴포넌트

import React from "react";

const Program = ({ data }) => {
  return (
    <div>
      <h1>언어</h1>
      <ul>
        {data.map((props) => {
          const { id, name } = props;
          return <li key={id}>{name}</li>;
        })}
      </ul>
    </div>
  );
};
export default Program;