[React.js] React.js 개론
React.js란?
Meta(facebook)이 개발한 프론트엔드를 위한 오픈소스 JavaScript 라이브러리
대규모 웹 서비스의 UI를 더 편하고 빠르게 개발하기 위해 만들어진 기술
[ React.js로 만들어진 서비스 ]
넷플릭스 페이스북 인스타그램 노션
기술적인 특징
- 컴포넌트 기반으로 UI를 표현한다.
- 화면 업데이트 구현이 쉽다.
- 선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 (<-> 명령형 프로그래밍)
- 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있음.
- 화면 업데이트가 빠르게 처리된다.
Rander Tree: 웹페이지의 청사진
Layout: 요소의 배치를 잡는 작업
Painting : 실제로 화면에 그려내는 과정
Layout과 Painting은 오래걸리는 과정임 (Reflow / Repainting)
DOM은 최대한 적게 수정되는게 좋음 -> 성능 이슈
이 과정을 리액트에서는 자동으로 진행해줌!
Virtual DOM 이란?
- DOM 을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판이라고 생각하면 된다.
- React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영한다. (연습 스윙같은 느낌)
- 동시에 발생한 업데이트들이 모였을 때 모인 업데이트를 한 번에 반영함 (DOM 1회 수정)
React App
React Application
어플리케이션에 가까울정도로 매우 다양한 기능을 제공하여, 단순한 웹이 아니라 웹 브라우저 위에서 동작하는 앱과 같다고 하여 리액트 앱 또는 리액트 어플리케이션이라고 부름
리액트 사용하려면
Node.js - React 라이브러리 설치 - 기타 도구 설치 및 설정 과정을 거쳐야하는데 마지막 단계가 시간이 오래걸리고 복잡하여 기본 설정이 미리 완료된 상태된 Vite를 사용하는게 좋음. React 공식 문서에서도 권장하고 있음.
Vite
차세대 프론트엔드 개발 툴
기본 설정이 적용된 React App 생성 가능
npm create cite@latestProject name
framework 선택 - React
variant(어떤 버전 사용할지?) - JavaScript
폴더/파일
public : 이미지, 폰트, 동영상과 같은 코드가 아닌 정적인 파일들을 저장
src : 소스의 약자. 실제로 작성하게될 자바스크립트/리액트 코드들을 보관하는 폴더
assets : public파일처럼 이미지 같은 파일들 저장 (차이점이 있음)
.eslint.cjs : 개발자들 사이에 코드스타일을 통일시켜주는 도구 (초기 설치시 기본설정으로 되어있음)
.gitignore : 깃허브에 올릴때 올리면 안되는 파일들 명시
index.html : 리액트 앱의 기본 틀 역할을 하는 HTML 코드가 담겨있음
bit.config.js : vite 도구의 옵션을 설정하는 파일
dev용 리액트 앱 작동시키는 법
npm run dev
구동원리
vite를 통해 생성한 리액트 앱에는 웹 서버가 내장되어있음
리액트 앱을 가동하기 위해 사용했던 npm run dev 명령어는 리액트 앱 서버를 가동시키는 명령어
가동시켰을 때 콘솔에 나타나는 http://localhost:5173/ 주소는 현재 가동 중인 리액트 웹 서버에 접속할 수 있는 주소
localhost : 내 컴퓨터의 주소
5173 : 고유한 포트 번호 (서버를 구분하기 위함)
