React #1 개념

HTML, CSS, JS

2021.03.22 - [Web/HTML&CSS] - HTML, CSS 기초

 

ECMA Script

자바스크립트의 표준. Java 이름의 저작권 문제 + 문법 표준이라는 의미로  ECMA(European Computer Manafactures Assocation)라고 부릅니다. 2015년 ES6 이전의 자바스크립트는 언어라고 부르기엔 민망할정도로 개판이었고 ES6 (ES2015) 이후 자바스크립트 표준이 확립되며 여러 편리한 기능이 추가되기 시작했습니다.

 

Node.js

웹 브라우저가 아닌 곳에도 자바스크립트가 작동하도록 해주는 런타임 환경.

유명한 패키지 다운로드 매니저(npm)을 기본 제공해주며 크롬의 V8 웹 브라우저 엔진을 사용합니다.

 

Npm, Yarn

자바스크립트 패키지 매니저 프로그램입니다. 각종 라이브러리의 버전, 종속성을 관리해주며 복잡하게 엮어있는 라이브러리들을 콘솔 명령어 한번으로 쉽게 다운로드, 관리 할 수 있게 도와줍니다. Node.js 에서 제공해주는게 npm(node package manager)이고, 페이스북에서 npm의 보안성이나 속도를 개선하려고 만든게 yarn 패키지 매니저입니다. 둘 중 뭐가 좋다기보다는, 각각의 장단점이 있습니다.

페이스북 공식페이지 Yarn 소개글(2016)

참고로 아래에 있는 Babel, React도 이러한 패키지 매니저를 이용하여 손쉽게 최신버전을 다운 받을 수 있습니다.

 

Babel

최신 자바스크립트 코드 문법을 사용하더라도 각 브라우저에 맞는 버전으로 변환해주는 크로스 컴파일러

리액트의 사용자가 늘어나 이제는 리액트에서 사용하는 JSX 문법도 표준으로 지원합니다.

 

프로젝트 종속성 관리

서로의 스코프(변수이름, 메모리) 침범, 여러개의 라이브러리나 파일들의 버전 호환과 import 중복호출, 누락등을 방지하는 걸 종속성 관리라고 합니다. ES6 이후 자바스크립트의 표준이 만들어지고 한 웹페이지에 여러 자바스크립트 코드를 사용하는 SPA(Single Page App) 개발 방식이 흥하게 되면서 프로젝트 종속성을 관리하기가 어려워졌습니다.

 

 

Webpack

위의 종속성을 쉽게 관리하기위해 사용하는 라이브러리입니다.

2021년 기준 가장 성능이 좋은 종속성 관리 자바스크립트 모듈 번들러 (Static Module Bundler)로 개발자가 작성한 자바스크립트 코드를 전부 읽어서 관리하기 편한 형태로 변환시켜줍니다. 다양한 부가기능이 있으며 webpack을 이용하여 리액트에서 사용한 JSX문법을 간단하게 babel으 연결시켜 알맞은 자바스크립트 코드로 변환 시킬 수 있습니다.

2021.04.16 - [Web/React] - Webpack

참고로 Webpack이 나오기 전에는 (~2014) Gulp나 Grunt 같은 리소스 관리 툴만 사용했습니다.

 

React

페이스북에서 개발한 컴포넌트기반 자바스크립트 View 라이브러리

HTML과 JS를 함께 사용하는 JSX문법을 사용 할 수 있습니다. (Babel을 통해 리액트 라이브러리를 사용하는 JS로 변환됨) 모든 것은 컴포넌트( 객체 )로 취급되며 가상DOM을 사용합니다.

 

React와 함께 많이 사용하는 프레임워크로는 express(HTML, Connect Component 도구) , NextJS(React SSR 도구) 등이있습니다.  2021년 기준 웹에서 가장 핫한 라이브러리 중 하나입니다.

 

* [더보기] Chrome 개발자도구

React-dectector (리액트 사용여부)

chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh?hl=en-US

 

Show-me-te-react(리액트 컴포넌트를 화면에 색칠해서 표시)

chrome.google.com/webstore/detail/show-me-the-react/iaebolhfcmodobkanmaahdhnlplncbnd?hl=en-US

 

React-Developer Tools(크롬 개발자도구에 React 탭 추가)

chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US

React-dectector (리액트 사용여부)

chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh?hl=en-US

 

Show-me-te-react(리액트 컴포넌트를 화면에 색칠해서 표시)

chrome.google.com/webstore/detail/show-me-the-react/iaebolhfcmodobkanmaahdhnlplncbnd?hl=en-US

 

React-Developer Tools(크롬 개발자도구에 React 탭 추가)

chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US

 

Virtual DOM ( 가상 DOM )

리액트는 컴포넌트 기반으로 가상 DOM을 사용하는 대표적인 라이브러리중 하나입니다.

리액트는 View만 다루는 라이브러리이며 SPA(Single Page App)에 사용하기 좋습니다.

2021.03.29 - [Web/React] - 리액트와 Virutal DOM

 

JSX 문법

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return (
    	<div>
          Imagine a {props.color} datepicker here.
        </div>
    );
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

리액트에서 사용하는 자바스크립트 확장 문법 (JavaScript eXtension 또는 JS XML)입니다.

HTML을 자바스크립트 코드내에서 사용 할 수 있고 코드를 직관적으로 쓰기 편하게 만들어줍니다. 다만, 결국에는 JSX문법도 Babel을 이용하여 바닐라 자바스크립트 코드로 변환되므로, JSX 코드는 순수 자바스크립트로 대체 가능합니다.

import react

// JSX 문법
var a =(
    <div>
        반갑습니다 <b> React에 오신것을 환영합니다. </b>
    </div>
);

해당 코드는 Babel에 의해 아래와 같은 자바스크립트 코드로 변환됩니다.

// 바닐라 JS
"use strict":
import react
 
var a = React.createElement(
    "div",
    null,
    "반갑습니다",
    React.createElement(
        "b",
        null,
        "React에 오신것을 환영합니다."
    )
);

 

순수 리액트

React를 사용하면 대부분 JSX문법을 이용하여 간결하게 코드를 작성합니다.

JSX를 사용하지 않는다면  내부적으로 어떤 자바스크립트 코드로 구성되어있는지 간단하게 한번 살펴 봅시다.

 

#1 import react

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

기존의 react는 라이브러리 한개만 불러오면 되었으나, 버전 0.14 이후로 React 코드 부분과 React-Virutal-DOM 부분이 분리되게 되었습니다. 이는 나중에 같은 리액트 코드로 다른 플랫폼까지 확장해서 사용하기 위함입니다. (React-Dom은 웹개발용, React-Native은 앱개발용)

 

• 참고로 JSX 문법을 이용하여 css파일이나 외부 이미지로 import로 불러와 사용 할 수 있습니다.

import logo from './logo.svg';
import './App.css';

 

• 리액트 컴포넌트 객체의 경우 <Class/> 로 불러와서 다른 코드에 사용 할 수도 있습니다.

class Hello extends React.Component{
    render() {
        return (
            <div>
                안녕하세요
            </div>
        );
    }
}
 
// 컴포넌트 객체는 JSX 문법 <Class/> 로 사용할 수 있습니다.
// 물론 HTML 태그처럼 <Class type="Hello> </Class> 이런 형태로 속성 입력도 가능합니다.
class App extends React.Component{
    render() {
        return(
            <Hello/> //  == class Hello {...}
        );
    }
}

 

 

#2. HTML element 생성

// React.createElement("tag", {속성값, key:value }, "내용")
React.createElement("h1", null, "안녕하세요")
React.createElement("div", {id: "myID", 'data-type':"title" }, "제목에 들어갈 내용입니다");

위의 리액트 코드는 다음 HTML 코드와 같은 DOM을 생성합니다.

<h1> 안녕하세요 </h1>

<!-- 해당 element가 최상단인 경우 data-reactroot 클래스가 자동 추가됩니다. -->
<div data-reactroot id="myID" data-type="title">
	제목에 들어갈 내용입니다.
</div>

 

 

# 3. 자식, 태그 감싸기

  <ul class="myClass">
    <li> 목록 1</li>
    안녕하세요
    <li> 목록 2</li>
    <li myType = "메롱" > 목록 3</li>
    <li> 목록 4</li>
  </ul>

 

• 이렇게 태그를 감싸고 싶다면, 아래 코드 처럼 작성하면 됩니다.
  React.createElement( ... ) 의 3번째 이후 인자는 전부 자식(children, 내용)으로 취급됩니다. 

React.createElement(
  "ul", // 태그명
  null, // 속성값, props
  React.createElement("li",null, "목록1"),
  "안녕하세요",
  React.createElement("li",null, "목록2"),
  React.createElement("li",{ myType:"메롱" }, "목록3"),
  React.createElement("li",null, "목록4"),
)

 

• 자바스크립트 코드로 생성된 리액트 객체(부모)는 다음과 같은 속성값을 가지게 됩니다.
  <div> 여기에 적은 내용 </div> 은 해당 리액트 객체의 props(속성값) 안에 children 속성으로 저장됩니다.

// ... React로 만든 객체의 속성값
{
"type":"ul",
  "props":{
    "children":[
      { "type:" : "li", "props": {"children" : "목록1"} },
      "안녕하세요",
      { "type:" : "li", "props": {"children" : "목록2"} },
      { "type:" : "li", "props": {"children" : "목록3", "myType":"메롱"} },
      { "type:" : "li", "props": {"children" : "목록4"} },
    ]
  }
}

 

 

# 4. 자바스크립트 활용하기

리액트의 가장 큰 장점은 자바스크립트를 이용하여 HTML 엘리먼트와 데이터를 분리 할 수 있다는 점입니다.

위에서 노가다로 만든 여러개의 <ul> 리스트는, 다음과 같이 생성 가능합니다.

참고로 HTML "class" 속성은 자바스크립트의 클래스 생성 키워드와 겹치므로 리액트에서는 "className"으로 바꿔 사용합니다.

const items = [ // 데이터
  '목록1',
  '목록2',
  '목록3',
  '목록4',
]

React.createElement( // HTML - DOM 생성
   "ul",
  {"className": "myList"}, // class : "myList"
  items.map( content => React.createElement("li", null, content))
)

  <ul class="myList">
    <li> 목록 1</li>
    <li> 목록 2</li>
    <li> 목록 3</li>
    <li> 목록 4</li>
  </ul>

 

# 5. 컴포넌트로 만들기

' 리액트의 모든 것은 컴포넌트로 이루어져 있다 '

위에서는 리액트를 이용하며 HTML 요소를 생성만 했을 뿐, 실제 문서에 반영하지는 않았습니다.

내가 만든 리액트 요소를 실제 DOM에 반영하고싶다면 컴포넌트로 감싸 react-dom 에 넘겨주어야 합니다.

import React from 'react'
import ReactDom from 'react-dom'


class 컴포넌트 이름 extends React.Component{
  // ... 자바스크립트 class 내용 ... //
  
  render(){ 
    return React.createElement("h1", {myProps: "속성값"}, " 내용(Children) " );
  }
}


// myComponent를 'root' 라는 ID를 가진 태그 안에 반영하라는 의미.
ReactDOM.render(컴포넌트, document.getElementById('root'));

import React from 'react'
import ReactDom from 'react-dom'


class myComponent extends React.Component{
  
  renderItem(item,i){ // 요소를 생성하는 myComponent 메서드
    return React.createElement("li", {key:i}, item)
  }
  
  render(){ // Component 내장 메서드. HTML에 렌더링할 부분
    return React.createElement("ul",
                               {className: "myClass"},
                               this.props.items.map(this.renderItem))
    // 이런식으로 컴포넌트 클래스 내의 메서드를 활용 하여 생성할 수 있습니다.
  }
}


// 리액트 가상DOM에 렌더링합니다.
// 가상 DOM에서 이전 문서를 비교해 아닌 변경된 부분만 효율적으로 수정합니다.
ReactDOM.render(myComponent, document.getElementById('root'));

이렇게 바닐라 자바스크립트와 리액트 라이브러리로 코드를 작성 할 수도 있습니다.

리액트에서 쉽고 직관적이게 쓸 수 있는 JSX문법도, 결국에는 Babel을 이용해 위에서 본 코드들도 변환됩니다.

 

다음 글에서는 본격적으로 JSX문법과 리액트에 대해 알아봅시다.