리액트 Component 만들기

• Class Component(클래스 컴포넌트)
  - 초기 사용함, 불편하다는 말이 많았다
• Function Component(함수 컴포넌트)
  - 이후로는 함수 컴포넌트를 수정하여 많이 썼다

훅은 함수 컴포넌트를 개선하면서 나오게 된 기술

1. Function Component

리액트 컴포넌트중에 함수 컴포넌트라고 한다.
function Welecome(props) { // props를 받는 Welecome()함수
  return <h1>안녕, {props.name}</h1>; // 리엑트 엘리먼트 반환
}

2. Class Component

function Welecome extends React.Component { // React.Component를 상속받아 사용한다.
  render() {
    return <h1>안녕, {this.props.name}</h1>;
  }  
}

Component의 이름

- 항상 대문자로 시작해야 한다!

- 소문자는 DOM태그로 인식한다(div, span)

- 대문자는 사용자가 정의했거나 인포트한 컴포넌트를 가리킨다.

---

ex)

HTML div태그로 인식

const element = <div />;

Welcome이라는 리액트 Component로 인식

const element = <Welcome name = "인제" />;

---

Component 렌더링

• Component 자체가 화면에 렌더링 되는 것이 아니다
• Component를 통해 나온 Element가 화면에 나오는 것이다

function Welcome(props) {
  return <h1>안녕, {props.name}</h1>; // {name:"인제"}
}

const element = <Welcome name = "인제" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

render에서 element를 읽는다 -> Welcome(props는 {name:"인제"}를 담고있다)
리액트 돔을 통해 실제 돔에 효과적으로 업데이트 -> 브라우저를 통해 볼 수 있다