Component

// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';

// 2. 리액트 컴포넌트 만들기
import React from 'react';

Component

//FunctionComponent란 컴포넌트 만들기
import React from 'react';

// 정의 1
function FunctionComponent() {  
  return <div>Hello</div>;
}

// 정의 2
const FunctionComponent = () => <div>Hello</div>;

// 사용
<FunctionComponent />

개념적으로 컴포넌트는 JavaScript 함수와 비슷하게 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트의 이름은 항상 대문자로 시작한다.

1) 함수 컴포넌트와 클래스 컴포넌트

//함수: 태그 이름 문자열
//<div id="root"><h1>내용</h1></div>
ReactDOM.render(
  React.creareElement("h1", null,`타입이 태그이름 문자열인 경우`),
  document.getElementById('root')
);

//함수: 컴포넌트
//<div id="root"><element/></div> 
//<element/> = <p></p> 즉 <div id="root"><p>내용</p></div>
const element = ()=>{
  return React.creareElement("p", null,`타입이 컴포넌트인 경우`);
};
ReactDOM.render(
  element,
  document.getElementById('root')
);

//함수: React.Fragment
//<div id="root">내용1\n 내용2\n 내용3\n</div>
ReactDOM.render(
  React.creareElement(React.Fragment, null,`타입이 React.Fragment인 경우`,`이렇게 들어갈 내용을 여러개로 쪼개어서 넣을 수 있다.`,`이때 ,로 나뉘는 부분 즉 문자열 하나가 끝나면 줄바꿈이 함께 들어간다.`),
  document.getElementById('root')
);