[3주차 -2] React.js 개론
React란?
오픈소스 자바스크립트 라이브러리, 대규모 웹서비스 UI를 편하게 개발하기 위해 만든 기술
React의 기술적인 특징
1. 컴포넌트를 기반으로 UI를 구성한다
컴포넌트(component): 화면/UI를 구성하는 요소
- 중복코드 없애고 유지보수 간소화
2. 화면 업데이트 구성이 쉽다
업데이트: 사용자의 행동(드래그, 클릭)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것
선언형 프로그래밍으로 인해 화면 업데이트를 구현하기 쉽다
업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것 만으로 화면을 업데이트 시킬 수 있다
3. 화면 업데이트가 빠르게 처리된다
- HTML, CSS를 DOM,CSSOM(더 보기 쉽게 변환한 파일)으로 변환하여 Render Tree, Layout, Painting순서대로 진행
- Layout과 Painting 과정은 매우 오래걸리므로 반복될 시 마비 가능성이 있음
- DOM수정을 최소화하여 업데이트의 횟수를 줄여야 속도가 빨라짐
- React.js에서는 실제 DOM을 변경하는 것이 아닌 가상의 Virtual DOM에서 수정 과정을 거친 뒤,
실제 DOM에서는 최소한으로만 업데이트를 실시하므로 속도가 빠르다
React App 생성
기존 과정
1. Node.js 패키지 생성
2. React 라이브러리 설정
3. 기타 도구 설치 및 설정(어려움)
>>> 대신 간편한 vite 사용
react폴더 오픈 후 아래와 같이 진행
위와 같이 하면 react폴더에 section4가 생성된다
vscode에서 section4를 따로 오픈한다
package.json
{
"name": "section4",
"private": true,
"version": "0.0.0",
"type": "module", // es모듈시스템 사용중
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": { // devDep와 dep는 아직 설치되지 않았음
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.11.1",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"eslint": "^9.11.1",
"eslint-plugin-react": "^7.37.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0",
"vite": "^5.4.8"
}
}터미널에서 npm i를 입력하여 node_moudules를 생성
(json파일을 기반으로 라이브러리가 알아서 설치됨)
public 폴더
- bit.svg라는 이미지 파일이 존재,
정적 파일을 저장하는 공간 (이미지, 폰트, 동영상 등)
scr폴더 (source의 약자)
- 리액트나 자바스크립트 코드를 저장하는 폴더
- asset 폴더에서 자바스크립트 파일이 저장되어 있음
- jsx는 리액트에서 사용되는 특수한 확장자(리액트 코드가 작성되는 공간)
- eslint.cjs 파일: 코드 스타일을 통일하는 데 도움을 주는 ESLint라는 도구의 설정 파일
- gitignore파일: git에 올릴 때 올리면 안 되는 파일을 명시하는 공간
- index.html파일: 리액트 앱의 기본 틀 역할을 하는 html코드가 담긴 파일
- bit.config.js파일: vite도구 옵션 설정
리액트 앱 실행시키기
// json파일의 스크립트 부분
"scripts": {
"dev": "vite", // 리액트 앱을 개발용으로 실행하는 명령어
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},npm run dev // 터미널에 해당 문장 입력
- local의 주소를 방문하면 리액트의 앱에 접속이 가능하다
- h로 헬프키를 누르면 shortcut이라는 단축키가 나온다
리액트 앱 구동원리
1. 리액트 앱 생성(with Vite) npm create vite@latest
2. 리액트 앱 가동 npm run dev
3. 리액트 앱 접속 로컬호스트주소 접속
vite를 통해 생성한 리액트 앱에는 웹서버가 내장되어 있고, npm run dev라는 명령으로 리액트 서버를 가동시킨다
- localhost:5173 주소는 리액트 웹서버에 접속할 수 있는 주소이다 (localhost이므로 내 컴퓨터에서만 접속 가능)
- 하나의 pc에서 여러 개의 서버가 동작할 때 서버를 구분하기 위해 고유 포트번호를 부여한다
- localhost:5173 주소로 리액트 앱에 접속하면 index.html파일을 브라우저로 보낸다
- boby의 script 내 main.jsx을 실행시켰을 때 오른쪽과 같은 요소가 추가된다
- CreateRoot메서드: 인수로 전달받은 HTML요소를 루트로 만들어주는 역할
- 루트 아래에 <App/>을 렌더링하겠다고 설정을 하고있다
- 3번 라인에서 /App.jsc를 임포트하고 있다
- function App의 return값에서 설정된 값을 구현하고 있다