React는 무엇이고 왜 사용하는가?

올해 3월에 웹 백엔드 엔지니어로 스타트업에 입사해서 어느덧 입사 3개월 차에 접어들었습니다. 백엔드 엔지니어로 입사했지만 어쩌다 보니 풀스택으로 일하고 있는데 3개월 동안 가장 많은 시간을 투자해서 공부한 react에 대해서 적어보며 지금까지 공부한 내용들을 정리해보려고 합니다.

입사했을 당시 react를 사용해 본 적이 없어서 처음 접했을 때 너무 낯설고 잘 이해가 되지 않았었습니다. 그래서 그 때 당시를 떠올리며 react에 대해서 잘 모르는 죠니에게 설명한다는 느낌으로 처음부터 하나씩 하나씩 적어보겠습니다.

---

먼저 react는 무엇인가?

react 공식 홈페이지(https://ko.reactjs.org/) 에 가보니 react를 이렇게 설명합니다.

사용자 인터페이스 즉, UI를 만들기 위한 javascript 라이브러리.

그럼 라이브러리는 무엇일까요? 라이브러리는 여러 사람들이 사용할 수 있도록 누군가가 만들어놓은 코드 모음입니다. 쉽게 생각해서 누군가가 만들어놓은 javascript 함수 모음이라고 보면 됩니다. 

const add = (number1, number2) => {
  return number1 + number2;
}

 예를 들어, 숫자 2개를 받아서 그 숫자들의 합을 반환해주는 함수를 만들고 이 함수를 여러 사람들이 쓸 수 있도록 해주면 그게 라이브러리가 되는 것입니다. 

react는 페이스북에서 만든 것이므로, 페이스북 직원들이 우리가 UI를 만드는 데에 필요한 javascript 함수들(실제로는 함수들만 있는 것은 아니지만 이해를 쉽게 하기 위해 함수들이라고 생각하겠습니다)을 만들어 놓은 것이 react인 것입니다. 그럼 우리는 도서관에 꽂혀 있는 여러 개의 책들 중에서 우리가 필요한 책만 골라서 보듯이 react라는 라이브러리 안에서 우리가 필요한 함수들만 골라서 사용하면 됩니다.

UI를 만들기 위한 javascript 라이브러리라는 설명에서 또 하나 주목할 점은 javascript 라이브러리 라는 것입니다. 보통 웹의 UI는 html과 css로 만들어집니다. 그리고 event 처리에 javascript가 사용됩니다. 하지만 react를 사용하면 javascript만으로도 웹 UI를 만들 수 있습니다. react 프로그래밍을 하다 보면 html처럼 생긴 애들을 보게 되는데 html로 착각하면 안됩니다.

const component = () => {
  return (
    <div>
      <p>Hello World!</p>
    </div>
  );
};

위 코드는 간단한 react 예제 코드입니다. 저 코드가 뭘 의미하는지는 지금 전혀 몰라도 됩니다. 중요한 것은 위 코드에 사용되는 <div>나 <p> 태그들이 html 태그처럼 보이지만 사실은 저 태그들도 javascript 코드라는 것입니다. 그 사실을 정확히 인지하고 있어야합니다.

그럼 React는 왜 사용하는가?

react 공식 홈페이지에서는 위와 같이 react의 장점을 설명합니다. 그러나 react나 vue, angular 같은 javascript library, framework(vue나 angular는 사용해보지 않았지만 위키백과에서는 vue, angular가 framework라고 한다.)로 UI 개발을 해본 적이 없는 사람들에게는 react만의 장점보다는 UI 개발을 위해 javascript library, framework를 사용하면 어떤 장점이 있는지를 먼저 알 필요가 있는 것 같습니다. 그래서 vue나 angular와 비교했을 때의 react만의 장점보다는 UI 개발을 javascript library로 했을 때의 장점을 적어보려고 합니다.

우선, react로 만들어지는 웹 페이지는 SPA(Single Page Application)입니다. 그렇기 때문에 SPA의 장점이 곧 react의 장점이 됩니다.

그럼 SPA는 무엇인가?

SPA(Single Page Application)은 말 그대로 하나의 페이지로 동작하는 웹 애플리케이션입니다. 하나의 페이지로 동작한다는 말은 웹 사이트에서 어떤 이벤트가 일어나든지, 페이지 내의 어떤 URL로 이동 하든지에 상관없이 처음 웹 사이트에 접속했을 때 내려받은 페이지에서 모든 동작들이 다 일어난다는 뜻입니다.

일반적인 웹 사이트와 SPA가 어떻게 다른 지를 보면 SPA를 더 잘 이해할 수 있을 것 같습니다.

일반적인 웹 사이트

예시를 들기 위해 index.html, page.html을 만들고 로컬 웹 서버를 만들어 브라우저에 띄워봤습니다. 위와 같이 localhost:8888에 접속하면 localhost라는 이름의 index.html을 서버로부터 다운받아 화면에 표시합니다. 그리고 page라고 적힌 링크를 클릭하면 localhost:8888/page로 이동하며 page라는 이름의 page.html을 서버로부터 다운받아 화면에 표시합니다.

이렇게 일반적인 웹 사이트는 어떤 URL로 이동했을 때마다 해당 URL의 페이지를 보여주기 위해 필요한 html, css, javascript 파일들을 서버로부터 다운받게 됩니다. 위 영상에서도 링크를 클릭했을 때마다 새로운 network request가 발생하는 것이 볼 수 있습니다. request의 응답 결과를 다운받기 전 까지는 빈 화면만 보이기 때문에 링크를 타고 이동할 때 화면이 바로 보이지 않고 화면 깜빡임이 생기는 것입니다.

아래는 react로 만든 위 예제와 똑같은 기능을 하는 웹 페이지의 영상입니다.

react로 만든 웹 사이트

SPA는 처음 페이지에 접속했을 때 웹 사이트가 동작하는데 필요한 모든 파일을 전부 다운받습니다(react로 만들어졌기 때문에 html이 아닌 js 파일들을 다운받습니다). 위 예제로 치면 localhost:8888에 접속했을 때 index.html과 page.html을 전부 다운 받아놓는 것입니다. 그리고 URL에 따라 다운 받아놓은 파일 중에서 현재 화면에 필요한 파일만 골라서 보여주는 것입니다. 그렇게 되면 URL 변경이 일어났을 때도 새로운 network request 없이 필요한 화면을 바로바로 보여줄 수 있습니다. 그래서 링크를 클릭했을 때 network 탭에 아무 변화가 없는데도 새로운 화면이 표시해줄 수 있게 되는 것입니다. 이렇게 되면 링크를 클릭해도 화면 깜빡임이 없어 마치 앱을 사용하는 것과 같은 부드러운 사용자 경험을 줄 수 있습니다.

---

화면 깜빡임이 없는 점 외에도 SPA의 여러 장점들이 있습니다. 하지만 앱을 사용하는 것과 같은 사용자 경험을 줄 수 있다는 점만으로도 javascript library, framework로 UI 개발을 해본 적이 없는 사람이 react를 새로 공부하기 위한 충분한 동기부여가 될 수 있다고 생각합니다.