1. React
1) React란?
사용자 인터페이스를 만들기 위한 Javascript 라이브러리 (SPA 라이브러리)
cf) 프레임워크: 개발을 위한 기본 틀, 뼈대 / 라이브러리: 개발에 필요한 도구 집합
즉, 사용자가 개발을 쉽게 하기 위해 도와주는 Javascript 라이브러리라고 한다.
조금 더 자세하게 말하자면 Node.js 기반의 Javascript 라이브러리라고 할 수 있다.
2) React가 최근 트렌드가 될 수 있었던 이유
(1) 전통적인 웹 서비스 방식의 한계
전통적인 웹 서비스는 모든 페이지에 대한 네트워크 요청이 필요했다.
예를 들어 'A'라는 웹 페이지에 진입하면 A와 관련된 리소스를 요청하고 'B'라는 페이지로 넘어갈 때는 B 관련 리소스를 다시 요청받아야 했다.
즉, 모든 페이지에 진입할 때마다 반복적으로 서버에 페이지 관련 리소스를 요청해야 한다.
서비스가 단순하다면 별다른 문제가 되지 않겠지만 규모가 커진다면 반복적으로 쌓이는 리소스가 늘어나게 된다.
(2) SPA(Single Page Application) 방식의 등장
SPA 방식은 클라이언트(브라우저)에서 화면을 그리는 방식을 의미한다.
앞선 경우에서 기존의 방식과는 다르게 A페이지에서 B페이지로 이동할 때 B에 대한 리소스를 새로 받는 것이 아니라, 이미 받았던 리소스를 가지고 B페이지를 생성한다.
이때 페이지 전환시, 새로고침이 되는 것이 아니라 Javascript에 의해 화면의 콘텐츠만 바뀌게 된다.
3) React 특징
(1) 컴포넌트 기반 설계
컴포넌트: 스스로 상태를 관리하는 캡슐화된 코드 조각(웹 페이지 구성요소 하나하나)
(2) Virtual Dom(가상돔)
실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용된다.
돔을직접변경하며생기는비효율을해결
2. React Application
1) Vite 설치
React로 만든 웹 서비스들을 보통 React App, React Application이라고 부른다.
- Node.js 패키지 생성
- React 라이브러리 설치
- 기타 도구 설치 및 설정 (입문자에게 권장하기 어려움)
React 공식문서에서도 권장하고 있는 Vite를 사용하면 더 편리하게 React를 사용한 개발이 가능하다.
2) React App 구동하기
npm create vite@latest
터미널에 해당 명령어를 입력하면 Need to install the following packages: ~ 문구가 뜬다.
enter를 눌러 yes를 선택하면 프로젝트 이름을 설정하는 옵션이 나오는데 본인이 원하는 이름으로 지정해준다. (회색 글자 vite-project는 기본값)
framework를 선택하라는 문구가 뜨면 방향키를 이용해 React를 선택해준다.
JavaScript를 사용해줄 거니까 JavaScript 선택..
Done. 이라는 메시지가 뜨면서 설정이 완료된 것을 확인할 수 있다.
이때, dependencies에 명시된 항목이 제대로 설치되어 있지 않기 때문에
npm i
를 터미널에서 실행해 depencies를 적용해준다.
2) 생성된 폴더/파일의 의미
(1) public 폴더
public 폴더에는 vite.svg 라는 이미지 파일이 하나 들어있다.
public 폴더는 svg나 png, jpg와 같은 이미지 파일들을 보관하거나 폰트나 동영상 같은 코드가 아닌 정적인 파일들을 보관하는 저장소라고 생각하면 된다.
(2) src 폴더
src폴더는 우리가 작성하게 될 react나 자바스크립트 코드들을 보관하는 폴더이다.
src > assets > react.svg 에서 svg 이미지 파일이 있는 것을 볼 수 있는데 public 폴더에서와 마찬가지로 이미지를 저장할 수 있지만 그 방식에 차이가 있다.
3) React App 구동원리
npm run dev => vite가 react 앱 작동시켜줌
이때 Local 주소로 이동해보면 React app을 실행시킬 수 있다.
React 앱을 실행하게 되면 index.html 파일을 브라우저에 보내준다.
