컴포넌트

어떤 HTML 요소 렌더링을 위한 작은 재사용 가능한 부분

import React from 'react';
import ReactDOM from 'react-dom';
 
class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
};
 
ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

생소한 부분들.... 그래도 JSX 문법이 return 되는 것, 그리고 ReactDOM.render() 부분이 익숙하게 보임

import : React

import React from 'react';

React library를 가져와 React라는 변수에 넣는 명령
→ React는 리액트 라이브러리를 사용하기 위한 메소드들을 가지게 됨

예) .createElement() 메소드 → JSX문법을 사용할 수 있음

import : ReactDOM

import ReactDOM from 'react-dom';

react-dom 메소드들을 가져와 ReactDOM라는 변수에 넣는 명령
→ React는 리액트 라이브러리를 사용하기 위한 메소드들을 가지게 됨

예) .render() 메소드 → react로 작성한 코드를 DOM에 렌더링 시켜줌

💡 React 자체는 아무런 DOM 객체를 포함하고 있지 않음. 'react'에서 import된 객체와 메소드들만이 순수한 리액트 요소들임.

---

Class Component

자바스크립트 클래스를 이용하여 리액트 컴포넌트를 선언할 수 있음

클래스 컴포넌트 선언 시작

class MyComponentClass extends React.Component {}

extend React.Component를 통하여 React.Component 클래스에 있는 기본적인 리액트 컴포넌트의 메소드들을 가져오면서 나만의 클래스 컴포넌트를 만드는 방식
(React.Compomnent = subclass)

컴포넌트 클래스명은 항상 대문자로 시작 (UpperCamelCase)
∵ JSX 문법에서 그냥 HTML 태그와 구분해야함

클래스 컴포넌트의 Body 부분 {} 사이

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

컴포넌트를 구성하는 모든 코드들이 들어가는 부분 (ES6 문법)

• 필수 메소드 = render() {return값}
• render 메소드는 항상 return값이 필요함
  (대부분의 경우는 JSX 문법으로 쓰여진 렌더링 대상 요소)

클래스 컴포넌트 사용하기 (인스턴스화)

<MyComponentClass />

HTML태그처럼 사용하지만 대문자로 시작!

호출된 해당 인스턴스는 MyComponentClass 클래스 컴포넌트가 가지고 있는 모든 메소드를 상속받게 됨 (지금은 일단 render 메소드를 상속받음)

인스턴스 렌더링 하기

ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

클래스 컴포넌트의 render 메소드를 사용하려면 ReactDOM의 메소드와 결합하여 사용해야함.

• ReactDOM.render 이 해당 인스턴스에게 render 메소드를 실행하도록 명령
• render 메소드 안에 있던 return 값을 Virtual DOM에 렌더링
• 화면에 보이게 됨

---

최종 결과 코드

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

ReactDOM.render(<MyComponentClass />, document.getElementById('app'));```