React – A JavaScript library for building user interfaces
A JavaScript library for building user interfaces
reactjs.org
React: A JavaScript library for building user interfaces
netflix 웹사이트를 이용해보면 전환(transition)이 빠르고 상호작용성(interactivity)이 매우 높고, 작동이 원활하다는 특징 등에 의해서 마치 모바일앱을 이용한다는 느낌이 든다.
모바일앱: great highly react user experience, fun to use, smooth transition
웹사이트: (tranditionally) request were sent to a server, and new html page sent back to a brawser -> we might have wait new html page to load
즉 web은 request와 response(html page 등)을 주고 받는 방식으로 작동하기 때문에 시간이 걸리고 모바일앱에 비하여 투박하다는 느낌이 든다. 이 부분을 개선하기 위해서 자바스크립트가 필요하다(아직 리액트는 아님). 자바스크립트는 브라우저의 작동원리를 개발할 수 있다. 사용자가 보는 것을 조작할 수 있는데, 브라우저의 자바스크립트는 dom을 조작하여 html 요소들이 화면에 렌더링 된다. 그래서 아직 새로운 html 페이지가 요청하지 않고도 사용자에게 다른 것을 보여줄 수 있다.
- a client-side javascript library
- all about building modern, reactive user interfaces for the web
- declarative, component-focused approach (그냥 자바스크립트로 하면, 아주 긴 단계를 거쳐야 함-명령형)
리액트를 배우면, 사용하면 Single-Page-Application(SPA)를 만들어보게 될텐데...spa는 서버가 제공하는 html은 페이지는 한 개이다. 특정 버튼을 클릭하면 새로운 html페이지로 이동하는 것처럼 보이지만, 실제로는 아니다!! 새로운 html을 받아오지 않고 그저 필요한 데이터만 서버로부터 받아와 화면에 표시되는 내용만 바꾼다. 그래서 더 매끄러운 ui를 보게 되는 것이다.
리액트는 컴포넌트 기반 UI 라이브러리이다. 그래서 리액트로 개발하면서 라우팅 등의 기능을 추가해야 할 경우 third party library가 필요하다. 리액트는 컴포넌트가 핵심이라는 것을 명심하자!
리액트 대안으로 앵귤러(Angular), 뷰(view.js)가 있다. 앵귤러는 완전한 컴포넌트 기반 UI 프레임워크로 리액트보다 더 많은 기능들을 가지고 있고 기본적으로 타입스크립트를 내장하고 있다. 그래서 작은 프로젝트를 하기엔 오버킬한 부분이 있을 수도 있다고 한다. 뷰는 리액트와 앵귤러의 중간 정도에 있다고 볼 수 있고 라우팅 기능을 내장하고 있다.
'React > (Udemy)React-The Complete Guide' 카테고리의 다른 글
| [React] 렌더링 리스트 및 조건부 Content(섹션5) (0) | 2022.05.21 |
|---|---|
| [React] 리액트 state, event 처리(섹션4) (0) | 2022.05.16 |
| [React] 컴포넌트 실습(섹션3-2) (0) | 2022.04.15 |
| [React] 리액트 기초 컴포넌트(섹션3-1) (0) | 2022.04.14 |
| [React] 기본 자바스크립트 문법 (0) | 2022.04.07 |
