리액트. 웹과 네이티브 사용자 인터페이스를 위한 라이브러리
위 문구는 리액트의 공식 웹사이트를 방문하면 가장 먼저 마주칠 수 있는 리액트를 설명하는 한 줄의 문장이다.
그렇기에 이 문장에서 선택된 단어가 가지는 의미는 크고 리액트를 이해하는 데 있어 한번 생각해볼만한 주제이다.
그만큼 라이브러리는 리액트에서 강조되는 키워드인 만큼 이 부분에 대해 간단히 정리해보려 한다.
프론트엔드 개발자로서 면접준비 좀 해봤다 하면 자주 마주치는 기본적인 질문 중 하나가
"리액트는 라이브러리인가요? 프레임워크인가요? 그 둘의 차이를 아시나요?"라는 것이다.
이 질문은 리액트의 역할에 대해 그만큼 많은 사람들이 혼란을 겪기 때문에 나왔다고 본다.
라이브러리와 프레임워크를 구분하는 가장 중요한 특징은 제어 흐름에 대한 주도권이 어디에 있는지이다.
프레임워크는 전체적인 웹앱의 흐름을 주도하며, 개발자는 그 안에서 필요한 코드를 작성하기만 하면 된다.
반면, 라이브러리는 도구로서, 개발자가 구현해 둔 흐름 속에서 필요한 기능을 가져다 쓰는 형태라고 볼 수 있다.
오늘날 대부분의 프론트엔드 코드가 리액트 속에서 작성되는 형태라 프레임워크라고 느껴질 수도 있다.
하지만 리액트만 가지고는 완전한 웹앱을 구축하기에 충분하지 않다는 특성을 생각해 보면 좀 쉬워진다.
리액트는 결국 뷰 레이어를 담당하는 도구로, 웹앱의 구조 설계, 라우팅 처리, 서버 데이터 통신과 같은 기능은 제공하지 않는다.
그렇기 때문에 온전한 리액트 웹앱을 만들기 위해서는 react-router-dom, axios 등과 같은 도구들을 함께 사용해야 했다. 이것이 바로 리액트를 라이브러리라고 부르는 이유이다.
추가로 인기있는 프레임워크인 NextJS과도 비교해 보면, 리액트만으로 제공하지 않는 기능들을 NextJS는 제공하고 있어, NextJS에서 제공하는 기능만으로 웹앱을 구현할 수 있으며 이는 자체적으로 제공하는 다양한 문법과 규칙을 활용하는 형태이다.