1.1.1 리액트의 정의

우리가 이 문서에서 배우려고 하는 리액트는 도대체 뭘까요? 리액트 공식 웹사이트에서는 다음과 같이 정의하고 있습니다.

"The library for web and native user interfaces"

이 문장을 한국말로 직역하면 웹과 네이티브 사용자 인터페이스를 위한 라이브러리가 됩니다. 어떤 뜻인지 조금 감이 오나요? 이 문장을 모두 이해하기 위해서는 먼저 라이브러리의 개념에 대해서 알아야 합니다.

보통 영어 단어 library는 도서관이라는 의미로 많이 사용됩니다. 하지만 프로그래밍 언어에서의 라이브러리는 도서관이 아니라 ‘자주 사용되는 기능들을 정리해서 모아놓은 것’이라는 의미를 갖고 있습니다. 우리가 도서관에 가면 책장에 수많은 책들이 정해진 기준에 따라서 잘 정리되어 꽂혀 있는 것을 볼 수 있습니다. 이처럼 프로그래밍 언어에서 라이브러리라는 것은 특정 프로그래밍 언어에서 자주 사용되는 기능들을 잘 모아서 정리해놓은 모음집이라고 보면 됩니다. 아래 그림은 프로그래밍에서의 라이브러리를 도서관에 있는 책장에 비유하여 그려본 것입니다.

그렇다면 이제 리액트가 라이브러리라는 것은 알았는데, 사용자 인터페이스를 위한다는 것은 어떤 의미일까요? 사용자 인터페이스는 영어로 User Interface라고 쓰고, 보통은 우리가 UI라고 줄여서 부릅니다. 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해서 중간에서 서로간에 입력과 출력을 제어해주는 것이 바로 User Interface입니다. 웹사이트의 경우를 예로 들어 보면, 우리가 흔히 보는 버튼이나 텍스트 입력창 등이 모두 사용자 인터페이스라고 생각하면 됩니다. 버튼을 누름으로써 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여줌으로써 사용자들이 반응을 하는 것이죠. 이처럼 사용자 인터페이스를 만들기 위한 기능 모음집(라이브러리)을 ‘UI 라이브러리’라고 부르고, 리액트는 대표적인 자바스크립트 UI 라이브러리라고 할 수 있습니다.

1.1.2 다양한 자바스크립트 UI 프레임워크

그렇다면 웹사이트를 구축할 때 사용하는 대표적인 자바스크립트 UI 라이브러리에는 어떤 것들이 있을까요? 바로 아래와 같은 것들이 대표적인 자바스크립트 UI 라이브러리입니다.

가장 왼쪽에 나와있는 것은 AngularJS(앵귤러JS) 입니다. 앵귤러JS는 구글에서 만든 오픈소스 프로젝트로 자바스크립트 기반의 웹 개발 프레임워크 입니다. 앵귤러JS는 리액트보다 훨씬 더 앞선 2010년에 처음 출시되었고, 불과 8~9년 전까지만 해도 굉장히 많은 곳에서 사용되었습니다. 하지만 2018년에 LTS(Long Term Support, 단기간에 버전 업데이트를 하지 않고 안정적인 버전을 장기간 유지하는 방식)모드에 돌입하였고, 그러다가 2022년 1월부로 LTS마저 중단을 선언하고 사실상 공식적인 지원이 종료되었습니다.

다음으로 가운데 나오는 것은 우리가 배우게 될 리액트입니다. 리액트의 정식 명칭은 리액트JS인데, 보통은 줄여서 리액트라고 부릅니다(참고로 자바스크립트 관련 라이브러리들은 이름 뒤에 JS를 붙이는 경우가 굉장히 많습니다). 리액트는 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다. 리액트는 2013년에 처음으로 출시되었으며, 출시된 이후 점점 치고 올라오다가 현재 다른 라이브러리들을 모두 따돌리고 가장 많이 사용되는 자바스크립트 UI 라이브러리로 등극하였습니다.

그리고 마지막으로 오른쪽에 나오는 것은 Vue.js(뷰JS) 입니다. 큰 IT기업의 주도로 시작된 앵귤러JS나 리액트와는 다르게, 뷰JS는 Evan You라는 중국인 개발자 한 명이 시작한 오픈소스 프로젝트입니다. 뷰JS는 2014년에 처음 출시되었고, 이후 점점 커져서 리액트와 항상 함께 언급되는 자바스크립트 프레임워크가 되었습니다. 뷰JS는 지금도 많은 곳에서 사용하고 있으며, 앞으로는 어떻게 될지는 아무도 예측할 수 없을 것 같습니다.

앞에서 보신 것처럼 모든 기술에는 유행이 뒤따릅니다. 웹 개발과 관련한 기술도 마찬가지죠. 한 때는 앵귤러JS가 웹 개발의 정답인 것처럼 여겨지는 시기도 있었고, 리액트보다는 다른게 훨씬 더 좋다고 사람들이 평가하는 시기도 있었습니다. 그래서 한 가지 기술이 무조건 평생 갈 것이라고 생각하지 말고, 기술의 큰 흐름을 읽는 것이 중요합니다. 지금은 리액트가 굉장히 우세하고 웹 개발에 있어서 거의 표준처럼 여겨지고 있지만, 앞으로 5년 뒤 그리고 10년 뒤에는 다른 새로운 기술이 그 자리를 차지하고 있을 수도 있습니다. 이 문서에서는 리액트를 배우는 것에 초점을 맞추고 있지만, 리액트를 공부하면서 동시에 그 밑바탕에 깔려있는 웹사이트의 작동 원리와 흐름을 함께 이해하려고 노력해보길 바랍니다.

NOTE. 프레임워크와 라이브러리
위에서 앵귤러JS와 뷰JS는 프레임워크라고 부르고, 리액트는 라이브러리라고 불렀습니다. 그렇다면 프레임워크와 라이브러리의 차이점은 뭘까요? 가장 큰 차이점은 프로그램의 흐름에 대한 제어 권한입니다. 프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면에, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태입니다. 결국 라이브러리는 제어 권한이 개발자에게 있으며, 프레임워크는 제어 권한이 프레임워크 자신에게 있다고 이해하면 됩니다.

1.1.3 리액트 개념 정리

자, 그래서 지금까지의 내용을 한 번 정리해보면 리액트는 ‘사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집’이 됩니다. 웹사이트를 개발하기 위해서는 HTML, CSS, 자바스크립트를 모두 잘 다뤄야 하는데, 사이트의 규모가 커지면 커질수록 수많은 페이지를 잘 만들어서 관리하기가 쉽지 않습니다. 그래서 이러한 복잡한 사이트들을 빠르고 쉽게 만들고 관리할 수 있게 하기 위해서 만들어진 것이 바로 리액트입니다.

앞에서 잠깐 나왔던 SPA에 대해서 다시 살펴보겠습니다. SPA란 Single Page Application의 약자로 하나의 페이지만 존재하는 웹사이트(또는 웹 애플리케이션)를 의미합니다. 규모가 큰 웹사이트의 경우 수백개의 페이지가 존재하는데, 이것을 모두 다 하나하나 HTML로 만드는 것은 굉장히 비효율적이고 관리하기도 힘듭니다. 그래서 하나의 HTML 틀을 만들어 놓고, 사용자가 페이지를 요청 할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것이 SPA입니다. 그리고 우리가 배울 리액트는 SPA를 쉽게 만들게 해주는 도구라고 생각하면 됩니다.