React 그냥 막하기 -2 (React tutorial)

React에서 다중이로 만들기

이전 게시글에서 일단 React를 통해 컴포턴트 하나를 띄우는 것을 해보 았다. 이번엔 React컴포넌트의 기본을 보고, 이를 멀티로 바꾸어보는 작업을 해 보자.

React 기본 구조

import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component{ //모든 컴포넌트들은 React.component를 상속받아 확장한다.
    render(){  //렌더를 통해서 컴포넌트를 그리게 된다.
        return ( //리턴을 통해서.
            <h1>하하</h1> //리턴을 통해 html 태그들을 보낼 수 있다.
        );
    }
}

//id가 app이라는 녀석을 찾아서
const app = document.getElementById('app');

//ReactDOM이 app 다시 그린다. 
ReactDOM.render(<Layout />,app);

(마크다운의 코드가 이상하게 나온다..;;)

일단 위의 코드를 살펴보자. 기존의 ES5를 통해 javascript를 했다면 위의 코드가 확 와닫지 않을 텐데. require 가 import from 으로 변화했다고 생각하자.

ES6가 대세다!

여튼 이제 보자 우리는 react와 react-dom을 통해 React, ReactDOM을 사용하게 된다. 우리가 사용하는 모든 컴포넌트 들은 React.Component를 통해서 확장해 나간다. 가장 중요한 녀석은

render()

return에서 html을 반환하게 된다.

한 가지 중요한 점은 한 개의 태그를 리턴할 경우는 상관없지만 2개 이상의 태그를 반환할 때에는 div 태크로 감싸 주어야만 한다. 이렇게 말이다.

// case 1 : 이건 에라다.
<h1> 하하 </h1>
<h2> 호호 </h2>

// case 2 : 이건 된다.
<div>
    <h1> 하하 </h1>
    <h2> 호호 </h2>
</div>

ReactDOM.render(,app);

마지막 html에 특정 element에 새로운 태그를 삽입하여 랜더링 하게 한다.

이렇게 되는데 이 녀석도 중요한 녀석이니 알아 두셔야 한다. 나중에는 막 값도 집어넣고 난리 부르스를 친 후에.. Redux로 넘어가서.. 지금까지 캐 삽질이었구나. 느끼게 될 수 있지만…
어째꺼나 저째꺼나.. 여기까지 기본 구조를 보았다.

React 다중이로 만들기

가끔 프로그래밍 하다 보면 파일 하나에 다 뚜드려 넣는 사람들이 있다. 바로 나다.

데헷..

우리가 하나는 페이지를 만드는 경우 다양한 컴포넌트들을 배치하게 된다. 만약 하나의 파일에 모든 컴포넌트들을 다 때려박을 경우 유지보수가 쉽지 않으며, 재사용에 문제가 생기게 된다. 따라서 모든 컴포넌트들을 하나의 파일로 만드는 작업을 해야한다. (라고,,, 권장합니다.)

자 그럼 이제 몇개의 컴포넌트들을 배치해 보자. 일단. 이러한 형태로 만들어 질 것이다.

구조

메인은 client.js

components (폴더)

Layout.js
Header.js
Footer.js

이렇게 구현해 보자. 이 폴더 구조를 간단히 설명하면 components 폴더에 우리가 만들 컴포넌트들이 다 들어간다. 그 중 Layout.js는 컴포넌트들의 메인이 된다. 그리고 Header를 하나 만들고, Footer를 하나 만들어서 레이아웃에서 불러볼 것이다.

일단 client.js 파일은 다음과 같다.

import React from "react";
import ReactDOM from "react-dom";

import Layout from './components/Layout' //레이아웃 불러오자

//html 문서에서 app을 찾아서 
const app = document.getElementById('app');

//ReactDOM이 app에 다시 그린다. 
ReactDOM.render(<Layout />,app);

이렇게 바뀌었다. 즉 client.js는 정말 메인의 위치에서 그 페이지 하나를 불러오는 녀석이라고 생각해 보자.
그렇다면 이제 Layout을 하나 만들어야 한다.

components 폴더에 Layout.js를 만들자.

Layout.js

import React from "react";

export default class Layout extends React.Component{
    render(){
        return (
            <div>
                <h1>여기는 Layout입니다.</h1>
            </div>
        );
    }
}

별다를게 없이 바뀌었음을 알 수 있다. 그리고 헤더와 footer를 만들어야 하는데 그전에 몇 가지 장난을 좀 쳐보자.
여기에서 값을 내보내는 방법인데.

Layout.js 변형-1

import React from "react";

export default class Layout extends React.Component{

    render(){
        let name="Gray"; //name 변수를 선언하고 값을 대입
        return (
            <div>
                <h1>나는 {name} 입니다.</h1>
            </div>
        );
    }
}

자 소스를 살펴보면 name이라는 변수를 선언했다. 그리고 리턴되는 태그에서 변수를 출력시키는 방법이다. javascript의 객체를 출력하듯이 하면 된다. 호옷.. 괜찮지 않은가?
물론 함수도 만들 수 있는데 이따위 짓도 가능하다는 것만 알아보자.(절대로 이딴 코드를 만들지는 말자.)

Layout.js 변형-2

import React from "react";

export default class Layout extends React.Component{

    render(){
        let name="Gray"; //name 변수를 선언하고 값을 대입
        return (
            <div>
                <h1>나는 { (()=>{return name})() } 입니다.</h1>
            </div>
        );
    }
}

보이는가? 여기서 꼭 알아두어야 할 점은 바로 return 되는 태그 안에서 자바스크립트를 쓸 수 있다는 사실이다. 이때 { } 를 통해 사용할 수 있다. 꼭 알아두자.

그런데 이따위 코드를 만들면 안되지 않는가? ES6에 맞춰서 바꿔보자.

Layout.js 변형-3

import React from "react";

export default class Layout extends React.Component{
    constructor(){
        super();//react Component를 위해 일단 super를 해주자.
        this.name="Gray";
    }
    getName(){
        return this.name;
    }
    render(){
        return (
            <div>
                <h1>나는 { this.getName() } 입니다.</h1>
            </div>
        );
    }
}

이렇게 바꿀 수 있다. 일단 우리는 클래스를 사용하고 있음으로 constructor로 생성? 초기화? 뭐 여튼 그렇게 시켜준다. 그리고 getName이라는 메소드를 만들고 이를 불러오는 것이다. 뭐 이 따위 짓을 할 수 있다.

자 이제 장난질 하지 말고, Header.js를 만들어 보자

Header.js

import React from "react";

export default class Header extends React.Component {
  render() {
    return (
      <header>여기가 머리다</header>
    );
  }
}

시간도 남으니 Footer.js도 만들어 주자.
Footer.js

import React from "react";

export default class Footer extends React.Component {
  render() {
    return (
      <footer>여기는 푸터당</footer>
    );
  }
}

두 파일을 한꺼본에 보면 export default를 조심하자. 그리고 태그가 소문자임을 확인하자. 하여간. 이렇게 만들고 나서 Layout을 다시 수정하자.

Layout.js 최종버전

import React from "react";

import Header from "./Header"
import Footer from "./Footer"

export default class Layout extends React.Component{
    render(){
        return (
            <div>
                <Header />
                <Footer />
            </div>
        );
    }
}

이렇게 만들고 나서 웹페이지를 확인해 보자.

이렇게 되었다. 최종 폴더 구성은 다음과 같다.