React란?
React는 UI Library다.
웹과 네이티브에서 사용할 수 있는 Library다.
프레임워크와 라이브러리
- 프레임워크? 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 자원을 지원하는 기술의 조합
- Spring Framework: java 기반의 웹(백엔드) 프레임워크
- Vue.js, Angular.js : JS 기반 웹 프론트엔드 SPA
- Djanjo, Flask: 파이썬 기반 웹 프레임워크
- Express.js, NestJS : JS 기반 웹 백엔드 프레임워크
- 라이브러리? 공통 기능의 모듈화가 이루어진 프로그램의 집합
-
React.js
-
react-router-dom
-
redux
제어의 역전 (Ioc)로 판단할 수 있다. : 프레임워크가 알아서 제어의 흐름을 가져가는 것
-
React가 라이브러리인 이유
그 자체만으로 프레임워크로 부르기엔 제공해야되는 기능이 부족함
React 특징
SPA(single page application)
한개의 페이지로 이루어진 애플리케이션이라는 말
인기가 많은 React(npm trends)
npm을 보면 점유율이 엄청나다
UI가 필요한 곳이면
react native로 모바일, 심지어는 VR까지 활용할 수 있다.
커뮤니티 막강
많은 사람이 사용해서 자료가 많고 채용시장도 활발
SPA(Single Page Application)
하나의 페이지로 이루어져 있는 애플리케이션이다.
React, Vue, Angular가 있다.
브라우저가 내부적으로 받아둔 로직을 가지고 알아서 자생하고 필요한 api만 서버에 요청한다. 자립성이 강한 느낌. 때문에 빠르게 처리가 가능한 것 같고 인기가 많다.
MPA?
Multi Page Application
- 요청 : 클라이언트(브라우저)에서 서버에 응답을 요청
- 생성 : 서버에서 요청에 따라 html을 만들어서
- 응답 : 그 파일을 브라우저에게 보내준다.
SSR
Server Side Rendering
초기 화면을 로딩할 때 서버에게 필요한 것들을 요청하고, 요청이 있을 때마다 서버에서 생성하고 브라우저에 보내준다.
Routing
SPA는 페이지가 하나인데 여러 페이지를 이동하는 것처럼 보이게 해줄 수 있는지?
답은 hash Routing에 있다.
hashed Routing
hash값을 기준(hashed)으로 페이지를 이동(routing)하게 된다.
http://localhost:4000/users?sort=1&page=2#hash- http://localhost:4000 : origin
- http:// : protocol or schema
- localhost : host or domain
- 4000 : port
- users : path
- ?sort=1&page=2 : query string
- #hash : Fragment
하지만 www.sample.com/#about보다 www.sample.com/about 의 방식이 더 유저에게 깔끔한 인상을 준다 이런 방식을
Browser Routing이라고 한다.
사용자 경험을 위해 Browser Routing을 많이 채택하게 된다.
리액트는 번들링 도구를 이용해서 browser routing이라도 하나의 html만 요청할 수 있도록 내부적으로 처리를 해준다.
NPM
node.js 설치할 때 자동으로 설치됨
Node Package Manager
JS 프로그래밍 언어를 위한 패키지 관리자로 수많은 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할을 한다.
YARN
npm 과 호환성이 좋고 속도나 안정성 측면에서 좋다.
CRA vs Vite
- CRA (create-react-app) webpack
- Vite vue.js의 창시자가 만듦. 호환이 잘됨. CRA보다 빠르다. ESbuild를 사용한다. HMR(hot module replacement) : 수정한것이 얼마나 빠르게 변경되느냐
Component
함수형 컴포넌트 - 쉬워서 더 많이 쓰인다.(공식 홈페이지에서도 권장)
클래스형 컴포넌트
컴포넌트 == 함수
컴포넌트는 대문자로 만들어야 함(파스칼 케이스)
폴더는 소문자로 시작하는 카멜케이스
Props
정보가 위에서 아래로만 흐른다. (부모 → 자식)
읽기전용으로만 취급되고 변경해선 안된다. 재할당x
