React #4 프로젝트 생성 및 컴포넌트의 이해

리액트는 컴포넌트 기반 View 라이브러리로

특별한 문법 공부 없이 자바스크립트를 안다면 유사하게 사용 가능합니다.

주로 함수형 프로그래밍 방식으로 많이 작성하게 됩니다.

 

이 글에서는 자바스크립트의 *더보기 arr.map(callback, [thisArg]) 를 사용합니다.

arr.map(callback, [thisArg])

Array.prototype.map( )

 

callback 함수를 주면, 배열의 요소를 순회하며 해당 함수 적용 시킨 배열을 반환합니다.

단, 원본 배열은 수정하지 않습니다.

[thisArg]를 입력한다면 콜백함수 내부에서 사용할 this 값을 설정 해 줄수 있습니다. 

 

콜백 함수

callback ( currentValue, [index ,[array]] )

currentValue는 현재 처리 중인 요소, index는 처리 중인 요소의 인덱스, array는 전체 배열 값입니다. 

보통 콜백함수는 화살표 함수로 많이 작성합니다.

let numbers [ 1,2,3,4,5 ];
let myCallback = fucntion(num,index){
	return num+index;
}

// 아래 2개의 배열의 결과 값은 같습니다.
let newNumbers1 = number.map(myCallback);
let newNumbers2 = numbers.map( (num,index) => num+inedx );

---

#1. 컴포넌트 구조화

리액트는 컴포넌트 단위로 view를 구성합니다.

class Contact extends React.Component {
    render() {
        return (
            <div>
                <div>Jiwo1 010-9999-9991</div>
                <div>Jiwo2 010-9999-9992</div>
                <div>Jiwo3 010-9999-9993</div>
                <div>Jiwo4 010-9999-9994</div>
            </div>
        )
    }
}

위 코드를 컴포넌트로 객체화 시키면 다음과 같이 만들 수 있습니다.

class ContactInfo extends React.Component {
// ContactInfo를 객체화 시켰습니다.
    render() {
        return (
            <div>
                {this.props.contact.name}
                {this.props.contact.phone}
            </div>
        );
    }
}

class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state={ 
        // 데이터를 [객체, 객체...] 형태로 state에 등록하였습니다.
            contactData:[
                {name:'Jiwo1',phone:'010-9999-9991'},
                {name:'Jiwo2',phone:'010-9999-9992'},
                {name:'Jiwo3',phone:'010-9999-9993'},
                {name:'Jiwo4',phone:'010-9999-9994'},
            ]
        }
    }

    render() { 
    /* 함수형 프로그래밍 기법을 사용하여 contactData를 받으면
     <ContactInfo/> 객체를 반환하는 메서드를 만듭니다.
     참고로 이런식으로 같은 객체를 여러개 생성할 때 객체별로 key값을 따로 주지 않으면 
     리액트 자체에서 경고를 띄우니 key={index}로 간단하게 인덱스값을 키로 줍시다.
    */
        const mapToComponent = (contactData) => {
          return contactData.map((contac,index) => {
              return (<ContactInfo contact={contac} key={index}/>)
          })
        };

        return (
            <div>
            // 위에서 만든 메서드를 이용하여 컴포넌트 생성.
                {mapToComponent(this.state.contactData)}
            </div>
        )
    }
}

---

#2. 프로젝트 생성

우선, 브라우저 밖에서도 사용할 수 있게 자바스크립트 런타임 Node.js를 설치해줍니다.

Node.js

그리고 Node.js에서 제공하는 npm(node Package Manager)을 통해 현재 가장 많이 사용하는 webpack도 설치해줍시다.

npm install --global webpack webpack-dev-server

--global (또는 -g) : 해당 컴퓨터의 모든 프로젝트가 사용할 수 있게 설치합니다.

webpack : 브라우저 위에서 import를 할 수 있게 해주고, .js파일들을 하나로 구조화 시켜줍니다.

webpack-dev-server : 별도의 서버 없이도 static 파일을 다루는 웹 서버를 열 수 있게 해주며 코드가 수정될 때 마다 자동으로 리로드 되게 할 수 있습니다(hot-loader 기능)

 

npm init 를 입력하면 node.js의 기본 설정파일(package.json 등)이 생성됩니다. 

또는 사용하시는 IDE 편집기의 기능을 통해 노드 프로젝트를 생성하셔도 됩니다.

(참고로 npx create-react-app 명령어를 통해 아래의 과정을 포함한 기본 프로젝트를 생성 할 수 있습니다.)

 

그리고 react 라이브러리와 런타임(react-dom)을 설치해줍시다.

참고로 --save는 현재 프로젝트의 node 설정파일(package.json)에 설치내용을 저장하는 명령어입니다.

npm install --save react react-dom

리액트 JSX 문법과 webpack을 사용하기위해서 아래의 리액트 개발 의존 모듈도 설치해줍시다.

--save-dev는 --save와 동일하지만, 현재 프로젝트 개발용으로 설치하여 나중에 패키지 관리를 편하게 해줍니다.

npm install --save-dev babel-core bable-loader babel-preset-es2015 babel-preset-react npm install --save-dev react-hot-loader webpack webpack-dev-server

 

그리고 package.json 에 들어가 sciprts를 추가해줍니다.

...
"script" : {
"test" : "..."
"dev-server" : "webpack-dev-server"
}

이렇게 해주면 앞으로 npm run dev-server 명령어를 통해 우리 프로젝트를 실행 시킬 수 있습니다.

 

---

#2-1 Webpack 설정

node로 개발에 필요한 패키지들을 모두 설치했다면, Webpack 설정파일을 만들어줍시다. 복사해서 생성하면 됩니다.

/webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        hot: true,
        inline: true,
        host: '0.0.0.0',
        port: 4000,
        contentBase: __dirname + '/public/',
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

 

참고로 위 코드의 설명은 다음과 같습니다.

// ES5 자바스크립트 내장함수 (ES6부터는 import)
var require = function(src){       //line 1 인자를 받아와서
    var fileAsStr = readFile(src)  //line 2 해당 코드를 불러온 후
    var module.exports = {}        //line 3 exports 객체를 만들고
    eval(fileAsStr)                //line 4 소스를 복사합니다. exports에 key:value로 채워집니다.
    return module.exports          //line 5 완성된 exports를 반환합니다.
}

// npm 설치한 webpack 코드를 require (ES6이후에서는 import 키워드)로 불러옵니다.
// require 함수는 해당 코드내에 module.exports를 리턴합니다.
var webpack = require('webpack');

// 다른 외부 자바스크립트에서 사용할 수 있도록 exports를 등록합니다.
// 참고로 module.exports 와 exports 키워드는 동일한 기능을 합니다.
module.exports = {
    entry: './src/index.js',
	// entry에 필요한 모듈들을 불러옵니다. 여러개라면 [ a, b... ] 
    
    output: { // 합친 모듈 파일들을 저장할 경로
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: { // 개발용 Server 설정입니다.
        hot: true, // hot-loader 온오프
        inline: true, // hot-loader의 클라이언트를 번들에 같이 넣어줌
        host: '0.0.0.0', // 기본값은 localhost, 사용하는 클라우드에 따라 설정
        port: 4000, // 포트 보통 3000,4000
        contentBase: __dirname + '/public/', //정적인 Content를 저장할 폴더. 기본은 Public
    },

    module: { //babel 설정
        loaders: [ // 컴파일 이 외에도 less, sass, HTML-mini 등 여러가지 설정가능.
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    },

    plugins: [ // webpack-hot-loader는 플러그인입니다. 여기에 추가
        new webpack.HotModuleReplacementPlugin()
    ]
}

---

# 2-2 HTML 및 JS 작성

public 폴더를 만들고, 해당 폴더안에 index.html을 작성합니다.

참고로 public 폴더안에는 이러한 정적인 데이터가 들어가며 webpack의 관리대상에 제외됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
    <!-- bundle.js 는 Webpack에서 output으로 제공하는 파일입니다. -->
</body>
</html>

그리고 리액트 컴포넌트를 만들어 봅시다.

src/components/ 와 src/index.js 를 만들면 됩니다. 우리가 만든 컴포넌트는 해당 폴더에 모아둘겁니다.

 

 

webpack 에서 ES5로 설정하였으므로 ES6 문법을 사용할려면 따로 설정을 해주어야합니다.

프로젝트 루트 디렉토리에 .jshintrc 를 만들어 다음 코드를 입력해줍시다.

{
  "esversion" : 6
}

 

이 과정을 마쳤다면 프로젝트 구성은 다음과 같습니다.

대략적인 프로젝트의 구조를 파악했다면, 다음 글에서는 npx create-react-app 으로 기본 프로젝트 틀(보일러 플레이트)를 이용하여 만들어 보겠습니다.