❄️ 리액트란?
리액트란 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리이다.
'선언적'이라는 것은 의미는 화면에 "무엇"이 나타나야 하는지에 대한 목표를 명시하는 것을 말한다. (<-> 명령형 : "어떻게" 나타나야 하는지에 대한 알고리즘을 명시하는 것을 말함.)
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다.
각 상태에 대한 간단한 뷰만 설계해 준다면, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링하기 때문이다.
컴포넌트란 작고 고립된 코드의 파편을 말하는데 컴포넌트화를 통해 반복 코드를 줄이고, 재사용성을 높이며 유지/보수를 용이하게 할 수 있다.
❄️ Why React?
먼저 프론트엔드 라이브러리가 등장하게 된 이유는 동적인 웹페이지를 보다 효율적으로 유지 보수하고 관리하기 위함이었다.
단순 정보 전달을 위한 정적 페이지의 경우 HTML과 CSS만으로도 충분하지만,
유저의 행동에 따라 페이지의 구성을 달리해야 하는 동적 페이지는 Javascript를 이용해 인터랙션을 구현해야 한다.
이 유저 인터랙션이 많아진만큼 자연스러운 UI를 위해선 프론트엔드 라이브러리 및 프레임워크가 필요하다.
이를 사용함으로써 얻을 수 있는 것은 프로세스의 비효율성을 줄일 수 있다 는 것이다.
유저 인터랙션이 다양해졌다는 것은 그만큼 DOM을 건드리는 일이 많아졌음을 의미한다. DOM을 건드리고나서 일어나는 렌더링 과정은 결국 브라우저에게 부담을 주는 일이고, 이는 곧 전체 프로세스의 비효율성을 야기한다.
결국, 프론트엔드 라이브러리 및 프레임워크는 DOM 관리와 상태 변화 관리를 최소화하고, 개발자가 오직 기능 개발과 사용자 인터페이스에 보다 더 집중할 수 있도록 도와준다.
그 중 리액트는 다음과 같은 장점으로 널리 쓰이고 있다.
- 컴포넌트 단위 개발로 생산성, 재사용성, 유지보수성이 높음
- JSX 문법(Javascript + Xml : 하나의 파일에 자바스크립트와 HTML을 동시에 작성 가능) 사용으로 코드 가독성과 개발 편의성을 높임
- Virtual DOM으로 리렌더링 횟수를 줄여 브라우저 연산 비용을 줄임
❄️ React vs Angular vs View
Angular
- Made by 구글
- TypeScript만 사용해야 한다.
- 상대적으로 무겁고 러닝커브가 높다는 단점이 있다.
- 프레임워크의 구조가 뚜렷하다 (슈퍼 MVW(Model-View-Whatever)구조)
- 프로젝트 생성에서부터 코드 최적화 작업에 이르기까지 모든 작업 가능 => 기능이 풍부하고 규모가 큰 애플리케이션을 개발할 때 유리
React
- Made by 페이스북
- 막강한 커뮤니티와 자료를 갖추고 있다.
- web과 native 앱 개발 모두 가능하다.
- 라이브러리의 특성 => 다른 설계에 잘 녹아들기 때문에 유연함을 요구하는 서비스에 권장된다.
Vue
- 러닝 커브가 낮다.
- 빠른 랜더링과 작은 용량(리액트의 약 1/2)
- Angular, React에 비해 나중에 만들어졌으나 빠른 속도로 성장중이다.
- 시장에 막 진입하여 가볍고 빠른 웹을 개발할 때 적합하다.
=> 각 라이브러리/프레임워크는 위와 같은 특징을 가지고 있고, 프로젝트 규모나 특성에 따라 더 적합한 기술은 다를 수 있다. 또한 버전 업데이트마다 개선될 여지가 있기 때문에 어떤 라이브러리/프레임워크를 쓰는게 정답일 순 없다. 그렇지만 현재에는 리액트 사용 규모가 가장 크다는 것은 부정할 수 없는 사실이며, 그 이유의 근간에는 높은 자유도와 커다란 커뮤니티가 자리잡고 있음을 알 수 있다.
🔗 참고 자료
React 공식문서
명령형 vs 선언형 프로그래밍
React를 사용하는 이유
Angular, React, Vue 무엇이 다른가?
React란? (+앵귤러, 뷰)
