React란
리액트는 js ui library!
라이브러리 vs 프레임워크
- 가장 중요한 차이점: 애플리케이션 제어 흐름을 누가 갖고 있는지?
- 라이브러리 -> 제어권이 개발자에게 있음
- 프레임워크 -> 제어권이 프레임워크에 있음
React는 왜 만들어졌을까?
- 기능 많아질수록 동적으로 표현할 ui가 늘어나면서,, DOM api만으로는 개발하기 어려워짐 ㅠㅠ
1세대 -> DOM 조작, 이벤트 발생
2세대 -> jQuery
3세대 -> 프레임워크(Angular, Vue), 라이브러리(React)
React 이해하기
싱글 페이지 애플리케이션 SPA
- 단 한개의 페이지만으로 구성.
- 모든 정적 리소스를 최초 한번만 다운받아 렌더링
- 페이지 갱신에 필요한 데이터만 리렌더링
- => 단점? 초기 구동속도 느림
- => 장점? 플래시 현상 x (왜냐면 리로딩 reloading 안해도 되니까! -> MAP는 페이지마다 리로딩하느라 플래시 현상 有)
- 어플리케이션 로드할때 빈 HTML을 로드 -> 컴포넌트에 작성한 React HTML들을 밀어넣음(index.html, bundle.js같은거)
- => 검색엔진 최적화SEO가 매우 어려움(왜냐면 빈 HTML이 검색~~에 적용되기때문) : 단점
- SPA 구조상 데이터처리를 클라이언트에서 하는 경우가 많은데, 해당 로직들이 js통해 구현디므로 코드가 외부엥 노출. 보안적인 문제
<--> MPA (멀티플~)
SPA 전 -> SSR
여기 놓침 ㅠ
- 렌더링: View(UI)를 화면에 보여주는것
심화) 초기 렌더링, 조화과정
초기 렌더링
여기 놓침 ㅠ
조화과정
react에서 View를 업데이트한다 === Reconciliation(조화)과정을 거친다
왜냐면, 컴포넌트에서 데이터에 변화가 있을때. 새로운 요소로 갈아끼우는것이기 떄문
=> 얘도 render()함수가 담당
Virtual DOM
브라우저에 실제로 보여지는 DOM이 아닌, 메모리에 가상으로 존재하는 dOM
js 객체임.
업데이트가 필요한 곳의 UI를 Virtual DOM을 이용해서 효율적으로 렌더링함 (=실제 DOM에 패치)
사용되는 이유?
- DOM의 치명적 문제점: 동적 UI에 최적화되어있지 않음. -> 크기 커질수록 웹 속도 느려질것.
- 정확히는, DOM 자체를 읽고쓰는 성능은 빠르지만, DOM변화가 일어난후 CSS를 다시 연산/레이아웃구성/페이지 리페인트 하는 과정이 시간 추가됨.
=> DOM을 최소한으로 조작하기 위해 Virtual DOM 방식 用
But, 정적인 애플리케이션에서는 오히려 Virtual이 성능 느려질수도
React의 특징
선언형
UI를 선언적으로 나타냄
JSX의 캡슐화
Component
리액트에서는, '특정 부부분이 어떻게 생길지 정하는 선언체로, React Element를 반환해주는 JS 함수' 이다
- 장점
- 재활용성 증가, 코드 유지보수 용이
- 해당 페이지의 구성 파악 용이. 가독성!
Data Flow
React는 단방향 데이터 흐름을 가짐 => 일어나는 변화를 보다 쉽게 예측 가능
JSX
리액트에서 사용하는 문법
리액트에서 JSX로 코드 작성하면, babel이 js로 변환해줌!
Babel
- jsx를 createElement로 컴파일해주는, 트랜스파일러(문법적 도구)임
- 최신 js 문법을, 모든 브라우저가 제공하는 '구기능'으로 변환시키는 과정 거침. -> 모든 브라우저에서 제대로 실행가능하도록
JSX 등장 이유?
- 웹이 상호작용적으로 점점 변하면서, '로직에 의해 동적으로 렌더링되는 요소'가 많아짐. 이를 위해 렌더링 로직&마크업이 함께 존재하는 JSX 등장!
장점
- 개발자 경험 DX
- 익숙함
- 문법 오류와 코드량 감소
규칙
- 모든 태그를 닫아야함
- 단일 상위 태그
- React.Fragment (<React.Fragment></~~>) => 축약형: <></>
- 중괄호 안에 표현식
- 속성 -> camelCase (카멜표기법 : 낙타표기법 ㅋ.ㅋ)
참고) 규칙 간편 적용, ESLint, Prettier
https://eslint.org/
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org
https://prettier.io/
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
React 실행하기
- 의존성: 프로젝트 진행할때 사용하는 다양한 라이브러리
Package Manager
프로젝트가 의존하고 있는 패키지를 효과적으로 설치/관리/갱신/삭제 도와주는 시스템
종류
npm, yarn, pnpm, yarn-berry
CRA
Create-React-App. 페북에서 제공하는 공식 보일러플레이트
리액트는 라이브러리이기때문에, 리액트 앱을 만들기 위한 환경 구축해야함.
가령, 번들러(Webpack), Babel, 개발 서버, 이미지 에셋 처리 등등
근데 CRA를 사용하면 개발환경이 구축되어있는 상태에서 개발 가능!
근데 우리는 CRA말고 Vite 사용할거임!
Vite + React
Vite 사용 이유
CRA는 js로 구성된 webpack 사용하는데, 얘 속도 느림
따라서 esbuild 기반으로 만들어진 빌드툴인 Vite 사용
거의 100배 이상 빠른 빌드도구