점유율 1위 프론트엔드 라이브러리, React

• 전세계 웹 프레임워크 중 리액트 사용량은 40%입니다. (출처 : boardinfinity, Most Popular Front-End Frameworks in 2023)
• 리액트는 Meta에서 오픈소스로 공개한 자바스크립트 라이브러리입니다.

현재 프론트엔드 Scene에서 가장 핫하고 트렌디하며 많이 쓰이는 라이브러리가 무엇이냐고 물으면 모두가 입을 모아 ‘리액트(React)’라고 대답할 것입니다.

실제 2023년도 조사 자료에 따르면 전세계 웹 프레임워크 중 리액트의 사용량이 40%로 가장 높게 계측되었기 때문입니다.(출처 : boardinfinity, Most Popular Front-End Frameworks in 2023)

리액트는 2013년 발표된 이후 서서히 각광받기 시작하여 현재는 점유율 1위를 달리고 있습니다. 최근 프론트엔드와 짝꿍처럼 늘 함께 언급되는 리액트는 페이스북을 개발한 메타에서 오픈소스로 공개한 자바스크립트 라이브러리 입니다.

메타에서는 페이스북을 사용하는 이용자들이 실시간으로 댓글이나 게시글을 확인하고 상호작용 할 수 있도록 만들기 위해 효율적인 툴을 고민하다 리액트라는 라이브러리를 제작하게 된 것입니다.

어떤 점이 리액트를 이렇게 인기있는 라이브러리로 만든 것일까요?

리액트의 장점은 무엇일까요?

• 싱글 페이지 어플리케이션(SPA)이기 때문에 속도가 빠르고 효율성이 높습니다.
• 서버 과부하가 적어지고, 매번 페이지를 새로고침 할 필요가 없어 사용자가 느끼기에도 더욱 편리해 집니다.

리액트는 타 라이브러리에 비해 확실한 장점을 가지고 있습니다. 그리고 그 장점은 일반인들도 체감할 수 있을 정도로 아주 확실한 장점입니다.

바로 싱글 페이지 어플리케이션 (SPA)이기 때문에 갖는 속도와 효율성입니다. 이 장점이 기존에 있던 기술들과 어떻게 다른지 쉽게 이해하실 수 있도록 그림 예시를 하나 들어보겠습니다.

기존의 기술로는 그림의 왼쪽처럼 일부분만 변경되더라도 전체를 한 번 새로고침하도록 구현할 수 밖에 없었습니다.

제공되는 화면마다 주소도 계속 달라지는 방법이었고, 댓글 하나만 달리더라도 화면이 전부 새로 로딩되다보니 속도도 느려질 수 밖에 없었습니다.

이런 방식으로 진행되면 댓글이 달리는 등 아주 작은 변화 하나에도 전체 페이지를 새로 그려야 하는 번거로움이 있고, 실제로는 서버의 과부하 등을 유발할 수도 있는 비효율적인 방법이었습니다.

이런 어려움을 페이스북에서도 겪고 있었기 때문에 오른쪽과 같이 해결할 수 있는 방법을 고안해냈습니다.

주소가 생기는 페이지는 딱 한 개만 만들고 (싱글 페이지 어플리케이션), 그 페이지 내에서 무언가가 바뀐다면 딱 바뀌는 부분만 새로운 정보로 바꿔주는 방식입니다.

새로운 댓글이 달린다면 프로필이나 게시글과 같이 변화가 없는 부분은 그대로 두고, 댓글창만 새로 바뀔 수 있도록 하는 것입니다.

이 방법을 사용하면 서버는 전체 페이지에 대한 데이터를 다시 전달하는 게 아니라, 댓글창 데이터만 전달하면 되기 때문에 서버 과부하가 적어집니다.

또한 매번 하얗게 페이지를 새로고침 할 필요가 없어 사용자가 느끼기에도 더욱 편리해 집니다.

리액트가 개발자들에게 사랑 받게 된 이유는?

• 가상 DOM(Document Object Model) 덕분에 메모리 낭비가 없고, 처리 속도 또한 빠르기 때문입니다.

위에서 든 예시처럼 변경되는 부분만 딱 찾아서 바꿔주는 작업을 왜 리액트만 할 수 있을까요?

바로 가상 DOM이라는 개념 덕분입니다. 이 개념 덕분에 리액트는 빠른 속도가 최고 장점이 되어 개발자들에게 큰 사랑을 받게 되었습니다.

가상 DOM에서 DOM은 Document Object Model의 축약어로, 웹 페이지를 구성하는 모든 구성요소들을 하나의 트리구조로 도식화한 것이라고 생각하면 간편합니다.

HTML 문서는 웹 페이지를 그리기 위해 존재하는데, head, body, h1등 다양한 태그들로 구성되어 있습니다. 이 태그들을 포함관계에 따라 한 눈에 보기 쉽도록 도식화한 것입니다.

이전의 라이브러리들은 도식화된 그림 (DOM) 하나를 가지고 작업을 해오다보니 li 태그 하나를 수정하기 위해서는 HTML → body → ul → li 라는 과정을 거쳐 힘들게 고쳤습니다. 예시라서 단계가 적지만, 실제 코드에서는 훨씬 더 복잡한 단계를 타고 내려가야 하기 때문에 수정할 부분을 찾기 위해서 정말 많은 메모리가 소비되었습니다.

그러나 리액트는 가상 DOM이 있습니다. 변경 전 그림과 변경 후 그림을 모두 가지고 있다고 생각하시면 됩니다. 변경 전 그림과 변경 후 그림을 양손에 들고 ‘틀린그림찾기’ 게임을 하듯 변경된 부분을 찾아냅니다.

그리고 그 부분만 쏙 바꿔내는 작업을 수행합니다.

이렇게 되면 힘들게 여러 단계를 거치며 타고 내려갈 필요가 없기 때문에 메모리를 낭비하지 않아도 되고, 당연히 처리 속도도 빨라지기 때문에 큰 장점이 될 수 밖에 없습니다.

다양한 산업군의 테크 기업에서 사용하고 있는 리액트

• 교육, 이커머스, 인공지능 전문 기업, 금융 등 다양한 산업군의 테크 기업에서 리액트를 사용하고 있습니다.

장점만 가득해 보이는 리액트, 실제로 우리 주변에서는 쓰이고 있을까요?

대한민국 테크 기업들의 동향을 살필 수 있는 ‘코드너리’라는 홈페이지에서 살펴보면, 우리가 흔히 말하는 ‘네카라쿠배당토’, 즉 대한민국의 대표적인 테크 기업들에서도 모두 리액트를 활용하고 있다는 것을 알 수 있습니다. 그 외에도 교육/이커머스/인공지능 전문 기업/금융/부동산/여행/헬스케어 등 정말 다양한 산업군에 있는 테크 기업들에서 리액트를 사용하고 있음을 알 수 있습니다.

프론트엔드 개발자가 되고 싶다면, 리액트 감각을 끌어올리고 스킬을 다져보세요!

리액트는 SPA와 가상 DOM이라는 고유의 개념과 특징으로 빠른 처리 속도, 효율성을 극대화하여 대중적인 라이브러리가 되었습니다. 현업에서의 수요도 상당히 큰 것으로 나타나고 있습니다.

개발 현장에서 프론트엔드 개발자가 되길 희망한다면, 기본 웹 페이지를 리액트로 변환하는 프로젝트 등을 통해 리액트 감각을 끌어올리고 스킬을 다져서 취업 시장으로 뛰어들어보길 권합니다!

👉 차원이 다른 Next Level 프론트엔드 개발 과정