React 컴포넌트(Components) 정의 및 렌더링

컴포넌트(Components)?

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

위의 사진에서 빨간 박스의 형식이 밑에도 반복되지만 값은 다른것을 확인할 수 있다.
일일히 다 작성할 필요 없이 React에서 컴포넌트로 위와 같은 형식으로 정의하고 재사용 하면서 값만 바꾸면 더 편하게 코드를 작성할 수 있다.
이러한 컴포넌트 여러개가 모이면서 하나의 웹 페이지를 구성하게 되는 것이다.

컴포넌트 정의 방식

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

함수형 컴포넌트 기본 형식

function App() {
  return (
  	// HTML이 들어갈 자리
  );
}

 

클래스형 컴포넌트 기본 형식

import React, { Component } from 'react' 

class App extends Component{ 
	render()
    { 
    	return( 
        	// HTML이 들어갈 자리 
            ); 
	} 
}

함수형 컴포넌트를 쓰나 클래스형 컴포넌트를 쓰나 결과 값은 같으나 현재는 함수형 컴포넌트를 더 많이 사용한다고 한다.
클래스형 컴포넌트를 사용하려면 Componenet객체를 import 하고 사용하여야 한다.
두 형식의 차이점은 아래 링크에 정리해두었다.

React 함수형 컴포넌트, 클래스형 컴포넌트 차이점

 

컴포넌트 정의 후 렌더링

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

컴포넌트 정의 후 렌더링 하려면 App 컴포넌트 내부에 만든 컴포넌트의 이름을 태그 형식으로 넣어 사용하면 된다.

생성한 React 프로젝트 > src > App.js (함수형 컴포넌트 사용)

function App() {
  return (
    <div className="App">
		<Webhead/>
    </div>
  );
}


function Webhead(){
	return(
		<div>
			<h1>This is React</h1>
			<p>React is ... </p>
		</div>
	);
}

 

생성한 React 프로젝트 > src > App.js (클래스형 컴포넌트 사용)

import React, { Component } from 'react'

class App extends Component{
	render()
	{
		return(
			<div className="App">
				<Webhead/>
			</div>
		);
	}
}

class Webhead extends Component{
	render()
	{
		return(
			<div>
				<h1>This is React</h1>
				<p>React is ... </p>
			</div>
		);
}

export default App;

 

한번 정의한 컴포넌트는 여러 번 재 사용이 가능하다.

import './App.css'; function App() { return ( <div className="App"> <Webhead/> <Webhead/> <Webhead/> <Webhead/> </div> ); } function Webhead(){ return( <div> <h1>This is React</h1> <p>React is ... </p> </div> ); } export default App;