[React]리액트의 Component 정리

https://reactjs.org/docs/components-and-props.html

Components and Props – React

 

 

[ Component 란? ]

 

 React는 컴퍼넌트 기반의 개발(Component Based Development)이라고도 불립니다. 

 

 컴퍼넌트 Component는 UI를 독립적이고, 재사용이 가능한 개별적인 조각으로 나눌 수 있게 하는 리액트 앱을 이루는 최소한의 단위입니다.  문서(html) + 스타일(css) + 동작(js)를 합쳐서 만든 일종의 태그라고도 할 수 있습니다. 

 

 리액트 element는 DOM 태그로 나타낼수도 있지만, 사용자가 정의한 Component로도 정의할 수 있습니다. 

 

 이름은 항상 대문자로 시작하며, 소문자로 시작하는 컴퍼넌트는 DOM 태그로 취급합니다. 

 

 Component는 자바스크립트의 함수와 비슷하며, props 라고 하는 독자적인 입력값을 인수로 받습니다. 그리고는 화면에 보여져야할 동작을 나타내는 리액트 element를 반환합니다. 

 

 

  ★ props

 

 리액트가 컴퍼넌트를 나타내는 element를 발견하면, JSX attribute들과 children을 하나의 객체(object) 형태로 이 컴퍼넌트에 전달합니다.

 이 객체를 'props'라고 부르며, props는 수정이 불가한 읽기 전용의 객체입니다. 

 

 

function Hello(props){   // Component 컴퍼넌트 
  return (
    <>
      // props는 Read-only! props.name += 'hi';와 같이 수정불가!
      <h1>Hello { props.name }</h1>   
    </>
  )
}

function App() {
  const element = <div>I'm DOM tag</div>  // DOM 태그
  return (
    <div>
      { element }            // DOM 태그 element
      <Hello name='Neo' />   // 컴퍼넌트 element
    </div>
  );
}

 

 

 

 

 

 

[ Component 종류 ]

 

1. 함수형 컴퍼넌트 Stateless Functional Component

 

기본형

import React from "react"; function 컴퍼넌트이름() {     return (         ...     ); }; export default 컴퍼넌트이름;

 

// src/Hello.jsx

import React from "react";

function Hello() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

export default Hello;

 

// src/App.jsx

import './App.css';
import Hello from './Hello.jsx';


function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

 

 

 

 

2. 클래스형 컴퍼넌트 Stateless Functional Component

 

// src/Hello.jsx

import React from "react";

class Hello extends React.Component {
  constructor(props){  // 생성자
    super(props);
  }

  componentDidMount(){
    // 상속받은 생명주기 함수
  }

  render() {  // render()는 필수
    return (
      <>
        <h1>Hello World</h1>
      </>
    );
  };
};

export default Hello;