Component?

리액트로 사용자가 볼 수 있는 화면을 구성하면서 여러가지 component를 구분하게 되는데, 만들면서 <div>가 많아지면서 한 단어로 깔끔하게 축약 할 수 있는 것이 React의 Component문법이다.

① 함수형 Component

function으로 정의를 하고, return문에 JSX로 렌더링한다.

import React from 'react';
import './App.css';

function App(){
	const name = '리액트'
    return (
    	<div className="react">{ name }</div>
    );
}

export default App;

② 클래스형 Component

class로 정의하고, render()함수에서 JSX를 반환한다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
	render(){
    	const name = 'react';
      	return (
        	<div className="react">{ name }</div>
        )
    }
}

Component문법

복잡한 HTML들을 한 단어로 치환할 수 있다.
① function을 이용해 함수를 만들어준다.
② 만들어준 함수 안에 return() 안에 원하는 HTML을 담는다.
③ 원하는 곳에 <header></heeader>라고 사용하면 함수로 축약된 HTML이 나온다.

import React from 'react';
import './App.css';

function App(){
	return (
    	<div>
        	...
        	그외 많은 HTML들
        	...
        	<Header></Header>
        </div>
    )
}

function Header() {
	return (
    	<div className="header">
        	<h2>제목</h2>
        	그외 넣고싶은 HTML들
      	</div>
    )
}

Component 특징

① Component 이름을 지을 때에는 보통 영어대문자로 시작한다.
② return()안에는 태그들이 평행하게 여러개 들어갈 수 없다.(평행하게 여러개를 쓰고 싶으면 하나로 감싸줘야한다.)

function App(){
	return (
    	<>
        	<div>예시1</div>
        	<div>예시2</div>
        	<div>예시3</div>
        </>
    )
}

<div></div>또는 <Fragment></Fragment>, <></>로 감싸준다.

③ 보통의 Component의 위치는 function App(){}과 나란히 만들어준다.
④ 만든 Component의 <div>안에 다른 Component를 만들어서 넣을 수 있다.

function Header() {
	return (
    	<div className="header">
        	<h2>제목</h2>
        	그외 넣고싶은 HTML들
        	<Cafe></Cafe>
      	</div>
    )
}

function Cafe() {
	return (
    	<div>
        	카페에서쓰는중이라..
        </div>
    )
}