[TIL]Day 20. 리액트(React)란?

 

 

프론트엔드 개발자라면 누구나 리액트라는 단어는 한 번쯤 접해보셨을 겁니다. 현재 수많은 기업에서 활용하고 있고, 리액트 커뮤니티도 엄청나게 활성화 되어 있어서 이것을 잘 배워둔다면 여기저기 활용할 요소가 많은 것이 사실이죠. 오늘은 이렇게 핫한 리액트가 도대체 무엇인지 살펴보는 시간을 가져보도록 하겠습니다. 

 

1. 리액트란?

 

리액트는 웹/앱의 뷰를 개발할 수 있도록 도와주는 라이브러리입니다. 우리가 지난 시간에 살펴보았던 라이브러리라는 단어가 다시 나오는군요! 이전 포스팅에서 얘기했던 것처럼 라이브러리는 특정 언어로 작성된 응용도구라고 생각하시면 되는데요, 리액트의 경우에는 자바스크립트로 작성된 라이브러리라고 할 수 있습니다. 

 

그렇다면 왜 리액트가 탄생하게 된 것일까요? 

 

예전의 웹 생태계에서는 html과 css로 모든 홈페이지를 만들 수 있었습니다. 내용 작성하고 그것을 그럴듯하게 보여주기만 하면 됐었죠. 하지만 최근의 웹 생태계에서는 어떻게 보여지는가를 넘어서 어떻게 사용자와 상호작용할 것인가가 중요해졌습니다. 

 

예를 들어

 

이런 인스타그램 페이지에서 좋아요 표시를 누르게 되면, 예전에는 '좋아요' 표시가 바뀐 새로운 페이지를 불러와야 했습니다. 하지만, 동적인 기능이 많이 가미된 오늘날의 웹에서는 단지 좋아요 버튼만 새로운 것으로 바꾸면 됩니다. 이것은 그만큼 발달된 자바스크립트 DOM이 있기에 가능해진 일이죠. 

 

만약 이런 게시물들이 1억개가 넘게 존재한다면 어떨까요? 개발자는 이러한 기능을 가진 게시물들을 하나하나 코딩해야 할지도 모릅니다. 하지만 개발자라는 사람들은 언제나 게으르고 자동화하는 것을 좋아하는 사람들이기 때문에, 이를 가능한 간편하게 자동화 할 수 있는 방식을 찾아 냈습니다. 그리고 그것이 리액트 입니다.

 

리액트는 수많은 SNS 게시물들을 관리해야 했던 페이스북에서 개발한, 이전보다 쉽게 사용자 UI를 만들어 낼 수 있는 라이브러리의 일종입니다. 

 

2. 리액트의 특징

 

그렇다면 리액트의 특징으로는 무엇이 있을까요?

 

1) 컴포넌트(Component)

 

리액트의 첫 번째 특징은 컴포넌트입니다. 컴포넌트는 UI를 구성하는 개별 단위입니다. 하나의 페이지를 구성할 때, 내가 원하는 UI를 블록 쌓듯 하나하나 조립해가면서 만든다고 생각하시면 됩니다. 

 

UI를 하나의 블럭으로 생각하면 중복되는 코드가 적어지고 페이지의 전체 구조를 파악하기 용이합니다. 또한 UI를 유지/보수하는 데에도 훨씬 수월해집니다. 예를 들어 하나의 UI에 변경사항이 생긴다면, 각 UI를 일일이 바꿔주는 것이 아니라, 하나의 컴포넌트만을 수정하면 홈페이지 전체의 UI가 변경되는 것입니다.

 

2) 가상 돔(Virtual DOM)

 

가상 돔이란 코드에 변화가 생겼을 때, 곧바로 브라우저의 DOM에 새로운 것을 반영하는 것이 아니라, 자바스크립트로 이루어진 가상 DOM에 한 번 렌더링을 한 후, 기존의 DOM과 비교를 하여 정말 변화가 필요한 곳에만 업데이트를 하는 방식입니다(직관적으로 이해하기 힘드신 분들을 위해 추후에 Virtual DOM에 대한 포스팅을 하도록 하겠습니다).

 

이 가상 돔을 활용하면 DOM의 변화를 최소화할 수 있는데요, 변화가 최소화 된다면 우리가 필요로 하는 데이터나 메모리의 용량이 적어지기 때문에 웹의 성능이 향상됩니다. 즉, 적은 비용으로 성능을 극대화 할 수 있다는 것이지요.

 

3) JSX

 

JSX는 리액트에서 사용하는 특수한 문법이라고 할 수 있습니다. 쉽게 말하자면, html과 자바스크립트를 합쳐놓은 문법이라고 할 수 있는데요, 다음의 예시를 보면 그 특징이 한눈에 들어오실 겁니다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
        <p>It's Working</p>
      </div>
    );
  }
}

 

이처럼 자바스크립트 안에 html의 표현을 넣어 html과 자바스크립트를 따로 작성하는 방식에서 벗어나, 한 페이지에서 그 둘 다를 작성할 수 있는 방식이라고 할 수 있습니다. 당연히 개발자 입장에서는 일이 확연히 줄어드니 좋아할 수 밖에 없습니다.

 

3. 리액트의 장점

 

1) 방대한 생태계

 

리액트의 생태계는 다른 라이브러리와 비교했을 때 엄청나게 크다고 할 수 있습니다. 그만큼 참조할 수 있는 문서들도 많고, 문제에 부딪혔을 때 인터넷에서 필요한 자료를 찾기에도 용이합니다. 

 

2) 사용하는 곳이 많다

 

리액트는 이미 많은 기업에서 활용하고 있습니다. 대표적으로 리액트를 만든 Facebook이 있고, 이외에도 Airbnb, BBC, Codecademy, Coursera, eBay, Twitch등이 있죠. 201004일 기준, 로켓펀치에서도 react라는 키워드 하나만으로 검색되는 채용공고가 529개나 되는 것을 확인할 수 있었습니다.

 

 

 

4. 마치며

 

이번 포스팅에서는 리액트가 무엇인지에 대해 간략하게 알아보았습니다. 현재 프론트엔드에서 가장 핫한 라이브러리인만큼 이에 대해 잘 공부하고 숙지해서 트렌드를 따라갈 수 있는 프론트엔드 개발자가 되시길 바라겠습니다.