리액트 기본 과정 정리 - 1 [리액트는 무엇인가?]

이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다.

목차

• 개요
• 프론트엔드 라이브러리
• 라이브러리/프레임워크 종류
• React 소개
• React를 특별하게 만드는 점
• React를 쓰면서 겪게 될 일들

개요

리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 리액트를 공부하시는 다른 분들께 도움이 되었으면 합니다.

 

프론트엔드 라이브러리란 무엇인가?

프론트엔드 라이브러리는 무엇이고, 이걸 왜 쓰는걸까?

일단 웹 페이지를 만들 때 굳이 라이브러리 없이 네이티브 코드로도 충분히 구현가능한 수준이 있다. 다음을 보자

+ 버튼을 누르면 숫자가 1씩 증가되는 페이지 코드

위 코드는 + 버튼을 누르면 화면에 보이는 숫자가 0부터 점점 증가하는 페이지 코드이다. 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 원하는 작업을 해주기 위해 코드를 작성한 것이다.

 

단순히 위에 처럼 사용자와 오갈 인터랙션이 적다면 네이티브 js 만으로도 처리할 수 있다. 그러나 프로젝트 규모가 점점 커지고 다른 인터랙션들과 인터페이스들이 추가가 됬을 때 DOM 요소들을 직접 관리하고 코드 정리를 하는 것은 정말 힘든 일이 될 것이다.

 

사용자 인터페이스를 동적으로 표현하기 위해선 수많은 상태(state)들을 관리해줘야 한다.

 

이에 DOM 관리와 상태값 관리를 최소한으로 하고, 사용자 인터페이스 및 기능 개발에 좀 더 치중할 수 있도록 도와주는 라이브러리와 프레임워크들이 나오기 시작했다.

 

대표적으로 Angular, Ember, Backbone, Vue, React 이 있다.

 

라이브러리/프레임워크 종류

대표적인 라이브러리/프레임워크들 중 3가지(Angular, React, Vue)에 대해서 알아보자.

Angular

다양한 Angular 만의 문법과 특정 기능을 구현할 때 편리하게 해주는 것들이 많다. 웹 프로젝트에 필요한 도구들(라우터, HTTP 클라이언트, 다국어 기능 등)을 프레임워크에 내장하고 있다. Angular1의 경우 나온지 꽤 되었고 기업에서 유지보수를 하면서 많이 사용을 하고 있는 편이다. Angular2는 보다 성숙된 버전으로 인지도는 성장해오고 있는 중이며 주로 Typescript 와 같이 쓴다.

 

React

"컴포넌트" 라는 개념에 집중되어 있는 라이브러리(프레임워크 X)이다. 컴포넌트는 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 사용자에게 보여준다. 페이스북 개발자들이 만들었으며 현재도 성능과 개발자 경험을 개선하기 위해 많은 연구 중이다. 생태계가 넓으며 많은 곳에서 사용을 한다. 앵귤러와 달리 사용자에게 보여지는 뷰만 신경을 쓰고 라우터, HTTP 클라이언트, 심화적 상태 관리 같은 기능들은 자체 내장되어 있지 않으므로 써드 파티 라이브러리를 활용한다. 대표적인 써드 파티 라이브러리는 라우터, 리덕스 등이 있다. 리액트는 공식 라이브러리가 정해져 있지 않으며 원하는 스택을 직접 선택해서 사용할 수 있다.

 

Vue

입문자가 사용하기 쉽고 편하다. 따로 Webpack 같은 모듈 번들러를 사용해서 프로젝트를 구성하는 앵귤러나 리액트와 달리 CDN을 통해서도 사용할 수 있다. HTML을 템플릿 처럼 그대로 사용할 수 있어서 마크업을 해주는 디자이너/퍼블리셔가 있는 경우 작업 흐름이 매끄러우며 공식 라우터와 상태관리 라이브러리가 존재한다. 또한 앵귤러에서 사용하는 디렉티브 개념이 존재하고, 리액트에서 쓰이는 Virtual DOM 개념또한 존재하며 JSX 도 사용할 수 있다. 앵귤러와 리액트의 장점만을 따와서 합쳐놓은 것이 Vue 이다.

 

 

: 각각의 라이브러리/프레임워크들 중 어떤 것이 더 낫다고 말할 순 없지만 좋아하는 것을 고를 순 있다. 각 도구들을 기초수준으로라도 한번씩 사용해보면 각자의 철학과 추구하고자 하는 방향이 서로 다르다는 것을 알 수 있다. 그 때 마음에 드는 것을 고르면 된다.

 

여기까지만 읽었을 때, 리액트가 많이 사용되는 이유에 대해 감이 오지 않을 수 있다. 리액트에 대해서 본격적으로 더 알아보자.

 

React 소개

페이스북은 왜 리액트를 만들게 되었을까?

지금은 없지만 예전 React 공홈에는 다음과 같은 문구가 존재했다.

We built React to solve one problem: building large applications with data that changes over time.
번역 : 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다

 

그렇다면 해답이 React 뿐일까? 아니다. 위에서 봤던 것처럼 여타 프레임워크/라이브러리들 또한 존재해왔고 프레임워크들은 MVC 패턴을 기반으로 구축이 되거나 MVVM, MVW 등의 디자인 패턴을 채용하는 프레임워크들 존재한다.

 

* MVC 패턴 간단 정리

Model : 데이터단을 담당함

View : 사용자에게 보여지는 화면

Controller : 사용자가 발생시키는 이벤트를 처리함

 

프레임워크들을 보면 Model이라는 공통점이 있는데 이들은 양뱡향 바인딩을 통해 Model에서 값이 변하면 View에서도 값을 변화시켜주고 View에서 어떤 값을 변화시키려고 하면 Model에 있는 값을 변화시킨다. 여기서 '변화' (Mutation)한다는 것에 주목을 하자. 변화를 주기 위해선 생각보다 복잡한 동작을 처리해줘야 한다. 예를 들어 이벤트가 발생했을 때 때 Model을 변화시키고, 변화를 일으킴에 따라 어떤 DOM 요소를 가져와서 어떤 방식으로 View를 업데이트 해줄 지에 대한 로직을 프레임워크가 처리해줘야 한다. React를 개발하기 전 Facebook 개발자들은 이런 발상을 하게 된다.

 

그냥 Mutation 을 하지 말자. 그 대신에, 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들어버리면 어떨까?

 

이렇게 새로 만든다면 정말 간단하겠지만, 브라우저 성능상 그때 그때 마다 새로운 화면을 찍어내는 것에는 한계가 분명 존재한다. 이에 개발자들은 'Virtual DOM' 이라는 것을 생각해낸다.

 

Virtual DOM

Virtual DOM은 말 그대로 '가상의 DOM' 이다. 화면에 어떤 변화가 생겼을 때 일단 전체 DOM을 자바스크립트로 이루어진 가상 DOM에 한번 렌더링을 한 다음, 기존 DOM과 비교를 하며 달라진 부분만을 찾아 업데이트를 하는 방식이다. 그림으로 한번 더 살펴보자.

 

왼쪽에 Model이 있고 이를 기반으로 Real DOM을 만들어 냈다. 그런데 Model에 어떤 변화가 생겼고 이를 DOM에 반영해줘야 한다면,

1. 가상 DOM으로 먼저 그려준다.
2. 이전 Real DOM과 가상의 DOM을 비교해 변화된 부분을 알아낸다.
3. 변화할 부분의 위치에 Patch를 해준다.

(Virtual DOM이 처리하는 작업에 대해 그림으로 쉽게 설명한 동영상이 있으니 참고하면 좋습니다)

https://youtu.be/muc2ZF0QIO4

 

React를 특별하게 만드는 점

React만 Virtual DOM을 쓰나?

여기까지 본다면 React가 Virtual DOM을 사용함으로써 특별하게 느껴진다. React는 Virtual DOM 을 성공적으로 사용한 선발 주자이긴 하지만 다른 라이브러리/프레임워크들 또한 Virtual DOM 개념을 사용한다. 

• Vue
• Marko
• Maquette
• Mithril

그렇다면 정말 React 를 특별하게 만드는 점은 무엇일까? (이 부분은 강사의 주관적 생각이 담겨있다)

 

엄청난 생태계

React 생태계에서 개발자들의 열정은 마치 2006년도에 jQuery가 등장했을 때를 연상시킨다. 그 당시에 jQuery를 누구나 사용할 줄 알아야 했고 jQuery 기반의 수많은 플러그인들이 만들어졌었다(jQuery-slider, jQuery-modal 등). 이와 비슷하게 React 라이브러리들이 정말 많이 만들어지고 있다. jQuery 또는 일반 JS로 짜여진 라이브러리들은 React로 Porting이 되서 많이 작성되고 있으며 일반적인 라이브러리 외에 프로젝트의 구조와 강하게 묶여있는 것들(라우터, 상태관리 라이브러리 등) 또한 다양하게 존재한다. 이처럼 다양한 생태계를 가지면서 좋은 라이브러리들 또한 쏟아져 나오고 있다.

사용하는 곳이 많다!

Airbnb, BBC, Cloudflare, Codecademy, Coursera, Dailymotion, eBay, Twitch, Walmart, Yahoo, Facebook 등 정말 많은 곳에서 사용을 하고 있다. 하지만 React의 사용률이 가장 높다고는 할 수 없는게, 기존에 jQuery나 Angular, Ember 등으로 만든 프로젝트들이 꽤 많이 있다. React는 새로운 프로젝트를 시작하거나 리뉴얼되는 프로젝트에서 많이 채택되어 사용이 된다. 한국에서도 현재 180여개의 기업에서 채택하여 사용하는 중이다.

한번 사용해보면, 좋아하게 된다.

2017년도 당시, 한번 사용해본 사람들 리액트를 사용해본 14689 명에게 설문 조사를 했을 때 1020명을 제외한 나머지는 리액트를 다시 사용 할 의향이 있다고 한다 (약 93%), 그리고 2019년 가장 사랑을 많이 받은 라이브러리 이기도 하다.

출처 : https://glitch.com/~2019-loved-dreaded-wanted

 

React를 쓰면서 겪게 될 일들

React는 정말 자유도가 높은 라이브러리이다. 예를 들어 라우터, 상태관리와 같은 기능들이 내장되어 있지 않고 공식 라이브러리 또한 존재하지 않는다. 대신 써드 파티 라이브러리가 존재한다.

 

라우터쪽을 보자면 React-router, Next.js, After.js 등이 있고

상태관리 라이브러리는 Redux, MobX, fr(e)actal 같은 라이브러리 등이 있다.

 

그리고 리액트 컴포넌트 스타일링만 해도 한 가지 방식만으로 정해져 있는게 아니라 수많은 방식으로 할 수 있다.

 

이에 따른 장점은 우리가 마음에 드는 것을 선택하여 사용할 수 있고 또 원한다면 직접 구현해서 사용할 수도 있다는 점이다. 단점은 어떤 것이 맞을지 여러가지를 시도해봐야 된다는 점과 다양한 라이브러리들 사이에 선택 장애(?)가 올 수 있다.

 

강사는 이 부분이 React 자체를 위해서도, 그리고 생태계를 위해서도 아주 좋다고 강조한다. 왜냐하면, React 라이브러리는 뷰 쪽만 관리하고 다른 기능은 써드 파티 라이브러리가 담당함으로써 React는 React 라이브러리로써 더욱 성숙해질 수 있고(페이스북 개발팀이 React 자체적인 기능에 더욱 많은 연구를 쏟을 수 있겠죠) 나머지 라이브러리들은 종류가 많다보니 개발자들이 다양한 시도를 할 것이고, 계속해서 성장을 할 것이다.

 

끝없는 공부

생태계가 계속해서 발전해나가고 있기 때문에 끊임없이 공부를 해야합니다. 그러나 이는 뭘 배우던 마찬가지겠죠? 다른 분야의 개발자던, 다른 업종에 종사하는 사람이던 가치를 인정받기 위해선 끊임없이 공부를 해야 합니다. 그리고 어느정도 숙달을 해놓고 나면 계속해서 최신 동향을 따라가지 않더라도 큰 문제는 없겠지만, 세상을 이끄는 좋은 기술들, 좋은 것들을 누리지 못한다는 생각이 들기 마련입니다. 그렇기에, 끊임없이 공부할 수 밖에 없겠죠.