어서와, 개발은 처음이지?

꿀잼 리액트의 주관적인 매력 본문

React

꿀잼 리액트의 주관적인 매력

오지고지리고알파고포켓몬고 2018. 7. 12. 12:48
반응형

어쩌다 리액트를 시작하게 됐는지..


저는 지난해 한 회사에 자연어 연구원으로 들어갔습니다.

좀 우리만의 기술을 연구하고 싶어서 들어왔는데,

뚜껑을 열어보니 연구는 개뿔~ 남의 연구 꽁무니만 따라가야 하는게 현실이였습니다.


몇번의 이직 시도와 퇴사를 고민했지만 회사 환경이 나아질거라는 말에 속아 최종 합격 받고도 거절했었는데

그때로 돌아가면 제 주둥이를 한 대 쳐주고싶네요. 


아무튼 연구에 흥미를 잃었고, 최근에 결국 앱 개발로 보직을 옮겼습니다.

그리고 때마침 이번 제품(모바일 앱)의 프로토타입 작업을 전담하게 되었습니다.(와아아아!!)


아~ 그래? 내 알아서 하라 이거지?


여지껏 허송 세월을 보낸 스스로에게 새로운 스택을 선물하고자, hip한 마음으로 React Native를 골랐습니다.

파이썬쟁이가 득실거리는 이곳에 자바스크립트를 끼얹기 위한 마음도 살짝 있었죠 나는 변절자다! 외쳐! js 만세!

그러나 이렇게 가볍게 시작했던 리액트는 시간이 갈수록 입천장에 붙은 낙지 빨판마냥 헤어나올 수 없는 매력으로 저를 휘감기 시작했습니다.


저는 제가 리액트의 스웩에 콩깍지가 씌여 잘못된 사랑에 빠진걸까 싶었지만 스택 오바플로와 js진영의 많은 분들이 '리액트와 사랑에 빠진건 너의 잘못이 아니야'라며 통계를 통해 증언해주셨습니다.


Stack overflow - Developer Survey Result 2017


The State of Javascript 2017




그럼 리액트의 매력은 무엇일까요?



- 컴포넌트 단위의 구조


리액트는 컴포넌트 단위의 구조로 이루어져 있어서 쉬운 유지보수와 코드의 재사용을 도와줍니다.

컴포넌트는 화면을 구성하는 요소를 작은 단위별로 나눈 것이라고 생각하시면 됩니다.

아래 화면은 개인적으로 css를 공부하기 위해 제작한 페이지인데, 일반적인 HTML 문서로써 본다면 아래와 같이 작성할 수 있습니다.



life.html

<head>
  <title>UI Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/channel.css">
  <link rel="stylesheet" href="css/card.css">
  <script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-12 col-sm-8 wrap_channel" style="">
      <!-- title -->
      <div class="row">
        <div class="wrap_title" style="background-image: url('img/title_img.jpg');">
          <div class="title">
            <h1>일상</h1>
          </div>
        </div>
      </div>
      <!-- title -->
      <div class="row">
        <div class="wrap_tags">
          <div class="tags_area">Tags</div>
          <div class="tags">
            <div class="tag_box">
              <font class="tag">#tag1</font>
            </div>


     ... <!-- 다량의 코드 -->


</body>

 

어휴.. 200줄 이상을 생략했는데 보기만해도 속이 울렁거리지 않나요?

이번엔 이를 Header, Tags, Contents, Content 컴포넌트로 나눠보고 일종의 pseudo 코드 형식으로 작성해보겠습니다. 



Life.js

<div>
    <Header />
    <Tags />
    <Contents />
</div>


Contents.js

const contents = [ ... ];
<div>
    contents.map((value, index) =>  <Content value={value}/>)
</div>


Content.js

<div>
    <img src={value.img_url} />
    ...
</div>

어떤가요? 한 눈에 들어오시나요?

div지옥에서 자유로워지셨습니다!

pseudo 코드 형식으로 작성했지만 실제 화면에 관여하는 코드도 이처럼 간단하게 구성되어 있습니다.



- 그로 인한 쉬운 유지보수


컴포넌트를 나누는 것은 함수를 잘게 나누는 이유와 상통합니다.

이 문서를 본 누군가에게 컨텐츠 하단에 버튼을 추가해달라고 부탁한다면, 망설임 없이 content.js에 들어가시겠죠?

가서 버튼만 추가하면 됩니다.


또한 리액트는 '한 화면을 구성하는 요소(컴포넌트, 스타일시트, 이벤트 등)는 해당 컴포넌트 범위 안에 작성되어야한다' 라는 철학을 가지고 있습니다.

이 철학은 제가 특히 좋아하는 부분입니다.

아래 코드는 벨로빠뜨님의 강좌를 보면서 작성한 코드인데, 컴포넌트와 동일한 범위에서 css까지 작성되어 있는 것을 유추할 수 있습니다.


Forms/
ㄴindex.js
ㄴForms.css

index.js

import React from 'react';
import './Form.css';

const Form = ({value, onChange, onCreate, onKeyPress}) => {
  return (
    <div className="form">
      <input value={value} onChange={onChange} onKeyPress={onKeyPress}/>
      <div className="create-button" onClick={onCreate}>
        추가
      </div>
    </div>
  );
};

export default Form;

규모가 커지고, 아름다운 템플릿이 나올수록 우리의 코드는 복잡해지고 관리가 어려워지는데,

컴포넌트와 동일한 범위에서 모든것을 관리하도록 한다면, 우리는 더 이상 빨간 버튼을 파랗게 바꾸기 위해 css여행을 떠나지 않아도 됩니다!

그저 컴포넌트가 있는곳으로 가서 style sheet를 고쳐줍시다!


(wrap_content가 5개나 있어? / wrap_content는 대체 어디있는거야?)



- 코드의 재사용


컴포넌트 화를 하면, 재사용성은 저절로 늘기 마련입니다. 반복되는 컨텐츠가 있다면 효율을 발휘한다는 것은 누구나 예상할 수 있는 사실이죠 .

하지만 리액트를 빛나게 해주는 다른 상황도 있습니다.

바로 멀티 플랫폼에서 컴포넌트를 통해 동일한 디자인을 보장할 수 있다는 것!




위 케이스는 React Native의 케이스로, 동일한 <Button> 컴포넌트를 사용했을때, 각각 Android, iOS의 네이티브 컴포넌트로 변환되기 때문에 약간 다른 모습을 하고 있는것을 볼 수 있습니다.

본디 플랫폼에 따라 디자인이 상이하지만, 네이티브 컴포넌트 위에 약간의 style sheet를 더하여(wrapping하여) 마치 동일한 기기에서 작동하는 것 처럼 UI를 구현할 수 있습니다.


이렇게 직접 만든 컴포넌트는 다른 화면에서, 혹은 다른 앱에서도 동일하게 사용할 수 있게 됩니다.

이렇듯 리액트는 아주 자연스럽게 우리가 유지보수가 용이한 패턴으로 코딩을 할 수 있도록 유도합니다.


또한, 이 모든것은 결국 다음에 설명할 내용을 뒷받침하게 됩니다.



- 넌 개발에 집중해, 최적화는 내가 알아서할게!


리액트는 우리가 DOM을 직접 제어하는 것과 다르게, 작성한 코드 중 무엇을 화면에 그릴지 스스로 판단하여 그 부분만 다시 그립니다. 또한 이렇게 함으로써 속도의 향상을 도와줍니다.


만약 우리가 DOM을 직접 제어하는 상태에 100개의 글 중 50번째 글을 지워버린다면 51~100번째 글이 한 칸씩 당겨지면서 사실상 새로 그려지게 되는데, 리액트는 51~100번째 글이 변화되지 않았다는 것을 알고 새로 그리지 않는다는 것이지요.

우리는 서비스 개발에 집중하면 됩니다!


이해가 되시나요? (저는 웹알못이라 이해하는데 시간이 좀 필요했습니다.)


약간 다른 관점이지만, 우리의 코드를 3D 게임이라 생각하면 이해하기 쉽습니다.

광활한 오픈월드 게임을 하다보면 시야를 벗어나는 것들은 흐릿한 덩어리가 되어 사라지는 모습을 볼 수 있습니다.


우리의 브라우저, 혹은 모바일 기기에게는 페이스북 뉴스피드에 있는 수백개의 글을 전부 화면에 띄우는 것이

배틀그라운드의 모든 맵을 랜더링 하는 것 만큼이나 힘든일입니다.


우리가 보기에 한 글자 지우는게 대수인가? 싶지만 지워진 글자를 표현하는데에는 생각보다 많은 리소스가 소모된다고 합니다.

결국 하고싶은 말은, 리액트가 무엇을 그리고 무엇을 그리지 않을지 사용자가 신경쓰지 않도록 도와주는 것이지요.


그렇기 때문에 다시, 컴포넌트 화가 중요합니다.

무엇을 그리고 무엇을 그리지 않을지 판단하는 단위가 되기 때문이죠.

(앞서 언급한 Life.js의 Contents.js 컴포넌트를 Content.js로 나누지 않는다면 글 하나가 바뀐것이 Contents.js가 통째로 바뀐것과 같은 동작을 하게됩니다.)


추후 설명할 리액트 생명주기를 통해 사용자가 직접 최적화를 이뤄낼 수 이는데, 역시 컴포넌트가 잘 분할되어있어야 실현 가능한 부분입니다.



- 동일한 구조로 멀티플랫폼을 한방에 관리할 수 있다.


드디어 마지막이네요.

사실 이런거 저런거 다 떠나서 멀티플랫폼을 지원하는 유지보수가 용이한 어플리케이션을 쉽게 만들 수 있다는 점이 가장 큰 매력이였습니다.



리액트 하나로 여러분은 웹, Android, iOS를 개발할 수 있습니다.


- 마치며.


바야흐로 js하나로 웹, 모바일, AI(tensorflow.js), PC(electron.js)까지 할 수 있는 시대가 도래했습니다.

조만간 C로 시작해서 js로 종결짓는 시대가 도래할까요?


다음은 React Native를 집중 탐구하도록 하겠습니다.





ps.


Angular나 Vue도 유사한 성격으로, 위의 내용들을 어느정도 공유하는 것으로 알고있습니다.

다만 React의 패턴이 배우기 쉽다고 느꼈고(저의 주 언어는 java, python이였습니다.) 넓은 생태계를 꾸리고 있다는 것도 React 선택에 영향이 있었습니다.

 

또한 멀티플랫폼 측면에서 vue native라는것을 봤는데 vue로 짠 코드가 사실은 react native로 변환된다고 하네요.


무엇을 시작할지 고민하시다 여기까지 오신거라면 각 패턴이 추구하는 철학을 체감해보고 본인의 분야에 맞는것을 사용하시기 바랍니다.

(이들을 비교하는 글은 구글에 많이 있습니다!)


Comments