React 컴포넌트

컴포넌트란 애플리케이션을 구성하고있는 페이지, 헤더, 컨텐츠, 버튼, 알림창 등 화면에 나타나는 구성요소들이다.

리액트에서 컴포넌트를 작성하면 컴포넌트의 재사용이 용이하여 유지보수성이 뛰어나다.

컴포넌트 작성시에 많이 쓰는 방법은 일반적으로 es6 문법인 class 를 많이 사용한다.

가이드 문서를 보면 function으로도 컴포넌트를 작성 할 수 있지만

class 를 사용하여 작성하는것이 개인적으로 더 좋아보인다.

컴포넌트 작성시의 몇가지 규칙이 있는것 같은데

컴포넌트는 React.Component 를 상속받아야한다.

컴포넌트명의 첫글자는 대문자 이어야 한다.

컴포넌트 내부의 html 코드가 들어가는 render function 내에 리턴되는 html 코드가 하나의 태그로 감싸주어야 한다.

일반적으로 <div></div> 로 감싸서 사용한다.

<div></div> 를 사용하지 못하거나 하는 상황에서는 

<Flgment></Flagment> 를 사용하면 된다. 

vue.js의 <template></template> 태그와 비슷한? 것 같다.

render() 함수의 들어가는 엘리먼트들은 html 코드처럼 보이지만 사실은 JSX라는 문법이다

JSX를 사용하지 않으면 코드 작성시에 굉장히 불편한데 JSX가 html 작성하듯이 컴포넌트를 작성 할 수 있게 해준다.

App.js

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

// App 컴포넌트 작성
class App extends Component {
    render() {
        return (
            <div className="App">
                <Header /> // Header 컴포넌트
                <Content/> // Content 컴포넌트
            </div>
        );
    }
}

// Header 컴포넌트 작성
class Header extends React.Component {
    render(){
        return (
            <div>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
            </div>
        );
    }
}

// Content 컴포넌트 작성
class Content extends React.Component {
    render(){
        return (
            <div>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
        );
    }
}

export default App;

위의 소스코드는 

App 컴포넌트와 Header 컴포넌트, Content 컴포넌트를 작성하고

App 컴포넌트에서 Header컴포넌트와 Content 컴포넌트를 포함시킨 구조이다.

결과

참고

https://reactjs.org/docs/getting-started.html

https://velopert.com/reactjs-tutorials