[React] 왜 React를 쓸까?

React

• 자바스크립트 라이브러리, 사용자 인터페이스를 만드는데 사용
• 사용하기 쉽고, 로딩 기다릴 필요 없고, 화면 전환 빠름

전통적인 웹사이트

• 약간 무겁고, 불편함
• 링크나 버튼 클릭 시 요청이 서버에 전송되고, html 페이지가 브라우저로 보내져서 화면에 보여줌
• 새로운 html 페이지가 로딩되는 동안 기다려야 함

 

DOM 조작 : html 요소들이 화면에 렌더링됨
JS 조작 : 사용자들이 보는 것 변경 가능(새로운 html 페이지 불러오지 않아도 됨)

 

왜 자바스크립트에 추가적으로 리액트가 필요할까?

• JS로 작업 할때는 모든 단계를 일일이 작성해야 함(명령형 접근방식) : 일련의 액션들을 단계별로 설명
• 리액트는 유지보수와 관리가 용이하도록 유지됨
• 최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줌
• 선언형 방식, 선언형 컴포넌트 중심 방식

 

SPA

• 첫번째 요청 후에 리액트가 화면에 표시되는 내용을 이어받아 제어하는 SPA!
• 페이지를 이동한 것 처럼 보이지만, 실제로 서버로 부터 새로운 html를 요청한 것은 아님
• 결과적으로 더 매끄러운 UI와 더 나은 사용자 경험을 제공할 수 있음

 

리액트의 특징

• React : 가장 인기있는 프론트엔드 프레임워크, 컴포넌트 기반의 UI 라이브러리, 컴포넌트에 중점을 두고있음(내장된 다른 기능이 많지 않음)
• React에서 라우팅 같은 기능이 필요하면 추가적으로 서드 파티 라이브러리를 설치해야함.
• 애플리케이션에 어떤 기능을 추가하기 위해 서드 파티 라이브러리 설치
• React 자체는 컴포넌트에만 초점을 맞췄기 때문

 

그 외 대안

• Angular : 컴포넌트 기반의 UI 프레임워크, 컴포넌트에 집중, 더 많은 내장 기능을 가지고있고 타입스크립트를 수용했음
• Vue : 앵귤러와 리액트 사이에 있는 느낌, 컴포넌트 기반 UI, 앵귤러보다 적고 리액트보다 많은 기능, 라우팅 같은 핵심 기능 포함, 앵귤러를 사용할때 만큼 과부화되지는 않음