Hanzzang

I am a Developer as an Early Adopter, a Cooperator, and a Supporter.

react.png

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 페이스북에서 제공하는 유연한 JavaScript 라이브러리이다.

컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다

즉, 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런 만큼 가볍고, 선택의 폭이 넓다.

1. 왜 React를 사용하는가?

웹페이지를 만들기 위해서 굳이 프론트엔드 라이브러리를 사용해야 할 필요는 없다.

HTML과 CSS, 그리고 순수 자바스크립트(VanillaJS)만으로도 웹페이지를 얼마든지 제작할 수 있다.

특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브러리는 큰 이득이 되지 못한다.

하지만 요즘의 웹은 정적이고 단순한 페이지가 아니다. 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다.

만약, 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하는 것은 힘든 일이다. 또한 복잡하게 늘어진 코드를 리팩토링(유지보수)하는 것도 비용이 많이 들게 된다.

그에 반해 React를 사용하면 사용자와 상호작용할 수 있는 interactive한 UI를 쉽게 만들 수 있으며, 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있게 된다.

또, React를 사용하면 브라우저 전체를 새로고침 하지 않고도 컨텐츠를 빠르게 변경할 수 있다는 장점(내가 가장 체감한 것)이 있다.


2. React 작동방식과 DOM

dom.png

React는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성한다.

이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 한다.

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

복잡한 SPA(Single-Page Application)에서는 DOM 조작이 많이 발생한다. 그 때마다 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적으로 되기 쉽다.

하지만 Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다.

이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선되며, 렌더링도 되지 않기 때문에 연산 비용이 적고, 모든 변화를 Virtual DOM을 통해 묶어 이를 실제 DOM으로 전달한다.


3. React State 관리 도구

mobx.png

아래 그림은 Mobx의 데이터 흐름이다.

Mobx와 Redux의 가장 큰 차이점은 store라고 할 수 있다. Redux의 단일 store원칙과는 다르게 Mobx는 Store의 개수에 제한이 없다.

따라서 기능별, 로직별로 원하는대로 store를 분리하여 깔끔하게 비즈니스로직을 작성할 수 있다. (비즈니스 로직 분리를 위해 나는 Mobx 사용한다.)


mobx_flow.png

redux에서 store object로인해 나타나는 immutable 이슈는 MobX에서 찾아볼 수 없다.

또한 redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체된다.

그로 인해 처리 속도가 빠르고, 유연하며, 코드가 적고, 러닝커브가 적다.


4. React Component 구조

react_component.jpg

React는 UI(혹은 View)를 여러 컴포넌트(Component) 쪼개서 만든다.

한 페이지 안에서도 Header, Footer 등 각 부분을 독립된 컴포넌트(Component)로 만들고, 컴포넌트들을 재조립해 화면을 구성한다.

컴포넌트 기반이라는 점은 React의 아주 큰 장점이다.

여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해 사용하면 된다.

또한, 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다.

import React, { Component } from "react";
import Header from "./component/Header";
import Footer from "./component/Footer";
import PostList from "./component/Contents";

class App extends Component {
  render() {
    return(
      <div>
        <Header />
        <Contents />
        <Footer />
      </div>
    )
  }
}

export default App;

위와 같이 Header나 Footer Contents 등은 컴포넌트로 만들고, 이를 재조립해서 루트 컴포넌트를 만드는 구조이다.


5. React JSX 문법

react_jsx.png

JSX는 과거 페이스북에서 PHP를 개량해 만들었던 XHP에 기원을 두고 있는 새로운 자바스크립트 문법이다.

React는 JSX로 짜여진다. (JavaScript는 아니다.)

JSX의 특징은 기본적으로 html과 유사하다다. 다만 약간의 원칙이 더 존재한다.


1. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.

<div>
  <p>first line</p>
  <p>second line</p>
</div>
<div>
  <p>second block</p>
</div>

위 처럼 두개의 div가 병렬로 존재한다면 새로운 div 태그로 감싸거나 fragment를 React를 임포트 하는 라인에서 같이 임포트해서 fragment 태그로 감싸줘야 한다.

fragment 태그는 React에서 div를 추가해 감싸고 싶지는 않지만 다른 태그를 감쌀 필요성이 있을 때 사용할 수 있도록 React에서 제공하는 태그입니다.


2. class 대신 className을 사용한다.


3. 스타일 속성은 중괄호({}) 안에 객체 형태로 표시하며 단어 사이의 ‘-‘를 없애는 대신 카멜케이스(Camel Case)를 사용해 CSS 프로퍼티를 나타낸다.

<div className="container" style={{backgroundColor: "red", fontSize: 16}} />


4. 모든 태그는 반드시 닫혀 있어야 한다.

인풋 태그의 경우 html에서는 닫지 않고 사용하는 경우도 있으나, JSX에서는 단축문법으로라도 반드시 닫아야 한다.

<input />


5. JSX 안에서 JavaScript 값을 사용할 때엔 중괄호를 사용한다. 중괄호 안에 변수명을 입력하거나 JavaScript 계산식, 값 등을 넣을 수 있다.

<div>
{name}
</div>


6. 주석은 {//}로 내용을 감싼다.**

참고