웹 개발 시 React 를 선택해야하는 이유

ES6 문법을 익히고나서 React를 공부하기 위해 포스팅을 시작하게 되었습니다.

 

기본적인 React에 대한 설명과 앱을 설치하고 실행해보는 방법에 대해서 설명하도록 하겠습니다.

 

 

1. React 란?

React는 페이스북에서 제공하는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

 

React 는 왜 프레임워크가 아니라 라이브러리일까?

React 는 왜 프레임워크가 아니라 라이브러리일까?

 

 

2. 그렇다면 React 왜 써야 할까?

React를 사용해 보면서 개인적으로 느낀점과 검색한 부분을 종합하여 작성하였습니다.

 

 

 

1) 컴포넌트를 통한 기능 구현

 

ES6에서 <script type="module"> 를 통해서 모듈화를 구현했다면, React에서는 Component 를 import 함으로서 레고블럭을 조립하듯 기능을 구현할 수 있게 됩니다. 그 결과 유지보수가 용이하며 가독성이 뛰어난 코드가 형성 될 것 입니다.

 

 

import React, { Component } from 'react';

class Movie extends Component {

    render() {
        return (
            <div className="movie-content" onClick={this.props.onClick}>
                <MovieContent
                    title={this.props.title}
                    poster={this.props.poster}
                    rating={this.props.rating}
                ></MovieContent>
            </div>
        );
    }
}

class MovieContent extends Component {
    render() {
        return (
            <div className="movie-poster">
                <img src={this.props.poster} alt={this.props.title}></img>
                <p>{this.props.title}</p>
                <p>{this.props.rating}</p>
            </div>
        );
    }
}

 

 

2) JSX를 통한 UI 구현

 

- JSX (Javascript XML) : Javascript 코드의 확장된 문법으로 Javascript 내부에 마크업언어(HTML)를 작성할 수 있는 것 입니다.

 

 

제가 Javascript 를 배우면서 MVC 를 구현할 때, Javascript, HTML, CSS 코드는 모두 분리되어 있고 Node.js 를 사용하여 HTML 을 동적으로 표현하려면 수많은 HTML 태그들을 문자열 처리해서 템플릿화 하거나 Jade를 통해 새롭게 작성해주어야 했습니다.

 

 

하지만 React의 JSX를 사용하면 Javascript 코드와 HTML 언어를 분리해서 작성할 필요가 없습니다.

 

 

JSX : React 코드에서 React 식(?) HTML 코드 작성

 

 

* JSX의 모든 문법이 HTML 와 동일하지는 않습니다.

 

ex) HTML <-> JSX

1) class <-> className

2) onclick <-> onClick

 

 

3) Virtual DOM 을 통한 속도 향상 가능

 

React를 통해서 SPA(Single Page Application) 작성시 DOM 조작이 빈번하게 발생하게 됩니다.

 

우선 Virtual DOM을 사용하지 않는 웹 브라우저애서는 DOM 트리에서 변경된 부분과 변경되지 않은 부분 모두 새롭게 View를 작성 하게 되어 비효율적입니다.

 

하지만 Virtual DOM을 사용한다면 개발자가 변경한 DOM 트리의 요소에 대해서만 새롭게 View를 작성하여 기존의 SPA에 적용시킴으로서 중복된 작업이 줄어들게 되어 속도향상이 가능합니다.

 

 

4) React Native 를 통한 앱 개발 가능

 

React 를 통해서 웹 어플리케이션을 잘 개발할 수 있다면, React Native 라는 Javascript 기반의 코드를 통해서 모바일 어플리케이션의 기능을 구현할 수 있게 됩니다.

 

 

3. React 설치방법

 

- React facebook github : github.com/facebook/create-react-app#quick-overview

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

 

 

설치는 원하는 디렉터리로 이동한 후, 아래의 단 3줄의 코드만 작성하면 된다. (VS Code 에디터 추천)

 

npx create-react-app my-app
cd my-app
npm start

 

 

4. React 앱 실행

실행하고자 하는 React 디렉터리에 들어가서 npm start 코드를 작성하면 실행 가능하다.

 

npm start
npm start --watch

 

성공적인 npm start 후 나타나는 메시지

 

 

* --watch 옵션 : 파일의 변경사항을 감시하는 기능이다.

 

--watch 옵션을 사용했을 때, React 디렉터리 내 파일의 변경사항이 저장되면 자동으로 npm start가 실행되도록 하는 기능이다.

 

 

npm start가 성공적이라면 다음과 같은 웹 페이지를 볼 수 있다.

 

 

* 참고사항

1) 설치된 eslint 가 버전이 높다면 버전 오류로 실행이 안 될 수 있습니다. global 하게 설치된 경우라면 사용자/node_modules/eslint 와 관련된 폴더를 삭제하면 실행 가능합니다.

 

2) 구글 크롬을 사용해서 React 웹 어플리케이션을 실행하는 것을 추천합니다. IE에서는 제대로 된 동작이 안 될 수 있습니다.

 

 

 

- 참고한 페이지

 

1. Virtual DOM

 

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG