[React] 컴포넌트

React Components

props라고 하는 임의의 입력을 받은 후, 화면에 표시 후 React 엘리먼트를 반환

함수형 컴포넌트

// props라는 입력을 받음

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

// 쉬운표현
function App () {
	return <div>hello</div>
}

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

---

부모-자식 컴포넌트

• 컴포넌트는 다른 컴포넌트를 품을 수 있음
  다른 컴포넌트를 품는 컴포넌트 부모 컴포넌트
  다른 컴포넌트 안에 품어지는 컴포넌트 자식 컴포넌트

import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

App.js 안에 Child라는 새로운 컴포넌트를 만듬
child 컴포넌트 안에 HTML 태그를 넣음 -> 한 컴포넌트 안에 다른 컴포넌트 넣기 가능

App 컴포넌트가 child 컴포넌트를 자식으로 삼고 있음
그래서 자식 컴포넌트에 있는 "나는 자식입니다"라는 문장이 출력됨

HTML 태그를 쓰듯이 화면에 보여지게 함 = Rendering 랜더링