컴포넌트 (Components)

컴포넌트는 React에서 화면에 표시할 내용들이 모여서 하나의 구역을 이루는 단위이다.제작할 웹 사이트에서 같은 형식에 다른 값을 가지고 있는 부분을 만들때 유용하다.

컴포넌트의 정의방식

컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다

함수형 컴포넌트

function App() {  
return (  	

// HTML이 들어갈 자리 

)

;}

클래스형 컴포넌트

import React, { Component } from 'react' 
class App extends Component{ 	
render()   
{     	
return(         	
// HTML이 들어갈 자리             
  ); 
 }
}

컴포넌트 정의 후 렌더링

App.js에 들어있는 function App( ) 도 마찬가지로 하나의 컴포넌트이다.새로운 컴포넌트를 정의해야될 떄 JSX 의 규칙을 준수하면서 정의해야 하며( XML(HTML)을 넣을 떄 항상 닫는 태그가 존재하여야 한다, 최상위 태그는 무조건 하나만 존재하여야 한다. ), 컴포넌트 함수 or 클래스의 이름의 첫 시작은 무조건 대문자로 시작하여야 한다.
컴포넌트 정의 후 렌더링 하려면 App 컴포넌트 내부에 만든 컴포넌트의 이름을 태그 형식으로 넣어 사용하면 된다.