웹 프론트를 오직 JavaScript만으로 개발할 수도 있다.
또한 React의 대안으로 Vue와 Angular도 존재한다.
그런데 왜 React.js가 현재 가장 인기있는 프론트엔드 라이브러리가 되었나?
자바스크립트 vs 리액트
자바스크립트는 명령형 접근방식으로 동작한다. 즉 HTML 요소를 생성하고, 요소에 클래스를 부여하고, 텍스트를 넣고, 이벤트 리스너를 추가하는 등 필요한 모든 단계를 일일이 코드로 작성해야 한다. 여러 개의 비슷한 HTML 요소를 만들기 위해 비슷한 코드가 계속해서 반복될 것이다.
하지만 리액트는 요소를 작은 컴포넌트들로 나눈다. 각각의 컴포넌트는 명확한 기능을 갖고 있고, 코드의 유지 보수와 관리가 용이하다. 선언형 컴포넌트 방식으로 고수준에서 작업함으로써 개발자가 복잡한 UI를 더 쉽게 만들 수 있다. 컴포넌트를 한 번 정의하면, 그것이 여러번 필요할 때 전체의 코드를 다시 반복할 필요가 없어진다.
또한, SPA를 구축하여 새로운 페이지를 불러올 때 서버로부터 새로운 HTML을 요청하지 않고 페이지가 매끄럽게 동작하도록 할 수 있다.
리액트를 사용함으로써 자원을 더 효율적으로 사용(컴포넌트 단위로 분리)하고, 더 나은 UX를 제공(SPA)할 수 있는 것이다.
React vs Angular vs Vue
React : 컴포넌트 기반 UI 라이브러리. 라우팅같은 다른 기능들은 서드 파티 패키지가 필요.
Angular : 컴포넌트 기반 UI 프레임워크. React보다 많은 내장 기능들을 포함하고 있음. 작은 프로젝트에는 과할 수 있음.
Vue : 컴포넌트 기반 UI 프레임워크. 리액트보다 많고 앵귤러보다 적은 내장 기능 포함. 라우팅같은 핵심 기능 포함.
왜 컴포넌트가 중요한가?
모든 UI는 결국 컴포넌트로 구성된다. 우리가 눈으로 보는 모든 인터페이스는 결국 컴포넌트로 쪼갤 수 있다.
코드를 컴포넌트 단위로 분리함으로써, 반복을 제거하여 재사용이 가능해진다.
그리고 코드를 작고 관리 가능한 단위로 쉽게 유지 보수할 수 있도록 함으로써 이슈를 분리할 수 있다는 장점을 갖게 된다.
