그렇다면 리액트의 장점은 어떤 것들이 있을까요? 리액트의 대표적인 장점들을 한 번 알아보도록 하겠습니다.

1.2.1 빠른 업데이트와 렌더링 속도

가장 먼저 리액트의 장점으로 빠른 업데이트와 렌더링 속도를 들 수 있습니다. 여기서 말하는 업데이트라는 것은 우리가 웹사이트를 탐색 할 때 화면에 나타나는 내용이 바뀌는 것이라고 생각하면 됩니다. 예를 들어 아래 그림처럼 리액트 공식 웹사이트에는 상단에 사이트 탐색을 위한 Navigation Menu(네비게이션 메뉴)가 있습니다. 여기서 Learn, Reference 등의 메뉴를 누르면 화면에 나오는 내용들이 바뀌어야 하겠죠? 그런데 만약 메뉴를 눌렀는데 새로운 내용이 뜨기까지 시간이 오래 걸리면, 사용자가 기다리지 못하고 나가버릴 것입니다. 그래서 빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나라고 할 수 있습니다.

리액트에서는 이러한 빠른 업데이트를 위해서 내부적으로 Virtual DOM이라는 것을 사용합니다. 갑자기 등장한 Virtual DOM이라는 단어 때문에 어렵게 느껴질수도 있지만, 쉽게 한 번 설명을 해보도록 하겠습니다. 먼저 Virtual DOM은 말 그대로 ‘가상의 DOM’입니다. 그렇다면 Virtual DOM을 이해하기 위해서는 DOM이 무엇인지 먼저 알아야 되겠죠. DOM은 Document Object Model의 약자로, 웹페이지를 정의하는 하나의 객체라고 생각하면 됩니다. 쉽게 말하면 하나의 웹사이트에 대한 정보들을 모두 담고 있는 큰 그릇이라고 보면 됩니다. 아래 그림처럼 크롬 브라우저에서 개발자 도구를 열어서 Console탭에서 document라고 치면 아래와 같은 내용이 나오게 됩니다. 이 내용이 바로 지금 제가 보고 있는 리액트 공식 웹사이트의 정보들이 모두 담겨 있는 Document Object Model입니다.

그리고 리액트에서 사용하는 Virtual DOM은 그 이름이 가진 의미처럼 가상의 DOM입니다. Virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것이라고 보면 됩니다. 아까 앞에서 리액트가 Virtual DOM을 사용하는 이유가 빠른 업데이트 때문이라고 말씀드렸었죠? Virtual DOM이 어떻게 업데이트를 빠르게 하는지 아래 그림을 보고 설명하도록 하겠습니다.

일반적으로 사용자와 상호작용을 하는 웹페이지 같은 경우 화면의 업데이트가 수시로 이뤄집니다. 앞에서 DOM이 웹사이트의 정보들을 모두 담고 있다고 설명드렸죠? 그래서 화면이 업데이트 된다는 말은 곧 DOM이 수정된다는 말과 동일합니다. 기존 방식 같은 경우 화면을 업데이트 하려면 DOM을 직접 수정해야하는데, 이것은 성능에 영향을 크게 미치는 굉장히 비용이 많이 드는 작업입니다. 왜냐하면 수정할 부분을 DOM의 데이터를 모두 검색해서 찾아야 하기 때문입니다. 반면에 리액트는 이 DOM을 직접 수정하는 것이 아니라, 업데이트 해야할 최소한의 부분만을 찾아서 업데이트 합니다. 위 그림에서 보이는 것처럼 어떤 상태의 변경(State Change)이 일어나면, Virtual DOM에서는 업데이트 해야될 최소한의 부분을 검색합니다. 그리고 검색된 부분만을 업데이트하고 다시 렌더링 함으로써 변경된 내용을 빠르게 사용자에게 보여줄 수 있는 것이죠.

1.2.2 Component-Based

리액트의 두 번째 장점으로는 컴포넌트 기반(Component-Based)의 구조를 들 수 있습니다. 리액트에는 컴포넌트라는 굉장히 중요한 개념이 나옵니다. 컴포넌트란 구성요소라는 뜻을 갖고 있는데, 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있습니다. 마치 작은 레고 블록들이 모여서 하나의 완성된 모형이 되는 것과 비슷하다고 생각하면 됩니다. 그래서 리액트로 개발을 하다보면 레고 블록들을 조립하는 것처럼 컴포넌트들을 조합해서 웹사이트를 개발하게 됩니다. 아래 그림을 한 번 보겠습니다.

위 그림은 대표적인 숙박공유 서비스인 에어비앤비(Airbnb)의 웹사이트 화면을 캡처한 것입니다. 에어비앤비 웹사이트도 리액트를 사용해서 개발되었는데, 아이디어와 둘러보기 각각의 영역에 있는 아이템들이 그림과 글자의 배치나 구조가 동일한 것을 볼 수 있습니다. 이 부분이 바로 리액트의 컴포넌트입니다. 이 아이템을 나타내는 컴포넌트 또한 내부적으로는 다른 컴포넌트들의 조합으로 구성되어 있고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성하고 있는 것입니다. 전체 페이지 또한 하나의 컴포넌트인 것이죠.

이 그림을 보면 더 쉽게 이해가 될겁니다. A라는 컴포넌트는 여행할 지역을 나타내는 컴포넌트이며, B라는 컴포넌트는 체험 프로그램을 나타내는 컴포넌트입니다. 이 페이지에서는 A와 B 컴포넌트가 반복적으로 사용되고 있는 것을 볼 수 있습니다. 이처럼 리액트로 개발된 웹사이트는 수많은 컴포넌트들의 조합으로 구성되어 있습니다. 그렇다면 이 컴포넌트 기반의 구조는 어떤 장점이 있을까요? 그 이유는 바로 다음에 나오게 될 재사용성입니다.

1.2.3 재사용성 (Reusabiliby)

지금부터 설명할 재사용성은 객체지향 프로그래밍(Object Oriented Programming)을 배울 때 등장하는 개념인데, 소프트웨어 개발에 있어서 굉장히 중요한 개념입니다. 그렇기 때문에 지금 배운 다음 곧바로 잊어버리지 말고, 앞으로도 개발을 할 때 항상 재사용성에 대해서 생각하고 개발하는 습관을 기르길 바랍니다.

재사용성이라는 것은 말 그대로 다시 사용이 가능한 성질을 의미합니다. 우리가 일상에서 사용하는 비슷한 말로 ‘재활용’이라는 말이 있죠. 재활용도 어떻게 보면 자원을 다시 가공해서 사용하는 것이기 때문에 재사용이 아니냐 라고 질문하실 수도 있지만, 재활용과 재사용은 조금 다른 개념입니다. 재활용은 다시 활용이 가능한 자원을 가공하여 새로운 제품을 만드는 것이고, 재사용은 계속해서 다시 사용이 가능한 성질입니다. 물리적인 물질들은 쓰면 쓸수록 닳기 때문에 기본적으로 재사용이 불가능합니다. 그래서 재사용이라는 개념은 소프트웨어 분야에서만 주로 쓰이는 개념입니다.

하지만 모든 소프트웨어가 곧바로 아무곳에서나 재사용이 가능하지는 않습니다. 예를 들어, 아래 그림처럼 A라는 프로그램에서 쓰던 CALENDAR라는 모듈을 B라는 프로그램에 적용하려고 했더니, CALENDAR 모듈은 DATE 모듈에 의존성이 있어서 DATE 모듈 없이는 독립적으로 재사용이 불가능합니다. 하지만 STRING 모듈의 경우에는 다른 모듈에 의존성이 없기 때문에 독립적으로 재사용이 가능합니다.

재사용을 하려고 할 때 의존성 문제 말고도 여러가지 호환성 문제가 발생할 수도 있습니다. 그래서 우리가 소프트웨어 개발을 할 때 재사용성이 높게 개발을 해야한다고 말을 하는데, 이 말은 해당 소프트웨어 또는 모듈이 다른 곳에도 쉽게 곧바로 쓸 수 있다는 것을 의미합니다. 다른 모듈에 의존성(dependency)을 낮추고 호환성 문제가 발생하지 않도록 개발해야 한다는 의미이기도 합니다.

그렇다면 재사용성이 높아지면 어떤 장점들이 있을까요? 먼저 전체 소프트웨어의 개발기간이 단축됩니다. 비슷한 소프트웨어를 개발한다고 할 때, 기존에 개발해둔 모듈들을 곧바로 재사용하여 개발하면 되기 때문에 개발기간을 굉장히 많이 줄일 수 있습니다.

재사용성이 높아지는 것의 두 번째 장점은 유지보수가 용이하다는 것입니다. 만약 여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면, 해당 모듈만 수정해서 다시 배포하면 되기 때문입니다. 또한 소프트웨어를 개발하다보면 예상치 못한 버그를 마주치는 상황이 빈번하게 발생하는데, 그런 경우 재사용성이 높은 형태로 개발되어 있다면 조금 더 버그의 원인을 찾기 쉽습니다. 왜냐하면 재사용이 높다는 것은 결국 여러 모듈들간에 의존성이 낮다는 뜻이기 때문입니다. 그래서 각 부분들이 잘 분리되어 있기 때문에 쉽게 버그를 찾아서 수정할 수 있는 것입니다. 여기서 언급한 것들 이외에도 재사용성의 장점은 굉장히 많습니다.

그렇다면 리액트와 재사용성은 어떻게 연관이 있을까요? 앞에서 설명드린 것처럼 리액트는 컴포넌트 기반의 구조로 되어 있습니다. 이러한 각 컴포넌트들은 웹사이트의 여러 곳에서 반복적으로 사용될 수 있습니다. 이 말은 곧 하나의 컴포넌트가 계속해서 재사용 될 수 있다는 말입니다. 그래서 우리가 리액트 컴포넌트를 개발 할 때, 항상 쉽게 재사용 가능한 형태로 개발하는 것이 중요합니다. 그렇게 되면 나중에 다른 웹사이트도 쉽고 빠르게 개발이 가능하기 때문이죠. 재사용성이 높은 컴포넌트를 개발하는 것에 대해서는 뒤에서 리액트 컴포넌트에 대해 자세히 배우면서 더 설명하도록 하겠습니다.

1.2.4 든든한 지원군

리액트의 또 하나의 장점으로는 메타(구 페이스북)라는 든든한 지원군을 들 수 있습니다. 앞에서 리액트는 메타가 만든 오픈소스 프로젝트라고 설명드렸었죠? 오픈소스 프로젝트라고 해서 모든 것이 무료로 알아서 돌아가지는 않습니다. 프로젝트가 성장하고 꾸준히 유지되려면, 수많은 개발자들의 노력이 필요합니다. 간단한 버그를 수정하는것 말고, 제대로 오픈소스 개발을 하려면 돈을 주고 일을 시킬 수 밖에 없습니다. 때문에 인기있는 오픈소스 프로젝트의 경우 보통은 스폰서가 있게 마련입니다. 자본이 투입되어야 오픈소스 프로젝트도 유지가 되는 것이죠. 그런 의미에서 리액트는 굉장히 큰 스폰서를 갖고 있다는 장점이 있습니다. 리액트는 전세계 최대 IT기업중 하나인 메타에서 시작한 프로젝트이며, 꾸준히 버전 업데이트가 되며 발전해 나가고 있습니다. 언젠가는 다른 새로운 라이브러리가 치고 올라와서 리액트를 많이 안 쓰게 되는 날이 올지도 모르지만, 이 책을 쓰는 지금 시점에서는 가장 인기있는 라이브러리이며, 최소 몇년 동안은 그 인기가 지속될거라고 생각합니다. 메타에서 프로젝트를 종료하지 않는한 계속 발전해 나갈 것이기 때문에 리액트는 믿고 사용하셔도 됩니다. 굉장히 든든하죠!

1.2.5 활발한 지식공유 & 커뮤니티

리액트의 장점중에서도 굉장히 중요한 것이 바로 개발 생태계와 커뮤니티입니다. 어떤 새로운 기술이 등장했을 때 그걸 처음으로 사용하다가 막히면, 물어볼 사람도 없고 구글에 검색을 해도 쉽게 답을 찾을 수 없습니다. 그런 점에서 활발한 지식공유와 커뮤니티는 굉장히 중요합니다. 내가 모르는 것을 바로바로 찾아서 볼 수 있다는 점이 엄청난 장점이 되는 것이죠. 리액트 같은 경우 굉장히 큰 개발자 커뮤니티를 형성하고 있습니다. 아래 그림은 오픈소스 플랫폼인 GitHub의 리액트 프로젝트 페이지를 캡처한 것입니다. 보통 오픈소스 프로젝트의 인기도를 Star갯수로 판단하는데, 리액트의 경우 현재 시점에서 Star가 238,000개 정도로 모든 오픈소스를 통틀어서 거의 최상위급에 속합니다. 그리고 프로젝트를 지켜보는 사람 수를 나타내는 Watch도 6,700명 가까이 됩니다.

그리고 기술의 생태계 규모를 판단하는 또 하나의 지표로 스택오버플로우(StackOverflow) 웹사이트를 참고할 수 있습니다. 스택오버플로우는 개발자들이 개발과 관련된 질문과 답변을 공유하는 웹사이트인데, 개발자들이 개발을 하다가 막힐 때 제일 많이 찾는 웹사이트입니다. 아래 그림은 스택오버플로우에서 reactjs 태그와 관련된 수치를 캡처한 것입니다. 리액트 관련 질문이 이미 480,800개 가량 등록이 되어 있으며, 리액트 태그를 지켜보는 사람 수가 534,900명 가까이 됩니다. 이는 실로 어마어마한 수치라고 볼 수 있습니다.

GitHub나 스택오버플로우의 수치들이 말해주는 점은, 리액트라는 프로젝트에 관심을 갖고 있으며 실제로 사용하고 있는 개발자들이 아주 많다는 것입니다. 또한 내가 개발을 하다가 막히면 도움을 청할 커뮤니티가 아주 잘 구축되어 있다는 것이기도 합니다. 그래서 여러분들도 리액트로 개발을 하다가 막히면 인터넷에서 조금만 검색해봐도 답을 찾을 수 있을 것입니다.

1.2.6 모바일 앱 개발 가능

리액트의 또 하나의 장점은 리액트를 배운 이후에 리액트 네이티브(React Native)라는 모바일을 위한 UI 프레임워크를 사용하여 모바일 앱도 개발할 수 있다는 점입니다. 보통은 모바일 앱을 개발하기 위해서는 Android앱을 위해서는 코틀린(Kotlin)이라는 프로그래밍 언어를 추가로 배워야 하고, iOS앱을 위해서는 스위프트(Swift)라는 프로그래밍 언어를 배워야 합니다. 그리고 프로그래밍 언어뿐만 아니라 각각의 개발 프레임워크에 대해서도 학습을 해야 합니다. 그래서 모바일 앱 개발은 높은 진입장벽이 있는 편인데, 리액트 네이티브를 사용하면 자바스크립트로 한 번만 코딩을 해서 Android앱과 iOS앱을 동시에 출시할 수 있습니다. 물론 네이티브앱과는 성능이나 속도면에서 조금 차이가 있을 수 있지만, 간단한 수준의 앱은 사용자가 차이점을 느끼지 못할 정도로 개발할 수 있습니다. 그래서 모바일 앱을 개발해보고 싶은 분들은 이 책을 통해 리액트를 학습한 이후에 리액트 네이티브를 학습해보시길 추천합니다.