React.js 개론
1. React?
- Meta(Facebook)이 개발한 오픈소스 Javascript 라이브러리
- 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
- 가장 인기있는 프론트엔드에서 사용되는 라이브러리
React의 특징
Component를 기반으로 UI를 표현
-
Component : 화면을 구성하는 요소, UI를 구성하는 요소
-
웹 페이지가 Header, Main, Footer가 있다고 했을 때, React는 이 웹 페이지를 Header.js, Main.js, Footer.js로 만들어서 레고 조립하듯이 3개의 Component를 합쳐서 만들 수 있음
-
기존의 html로 작성하면 개발하는 중에 중복이 많아짐
-
React에서는 모든 요소들을 Component를 모듈화해서 사용하기 때문에 한 Component를 여러 페이지에서 불러와 사용하게 함
-
따라서 중복이 줄어들고 유지보수가 쉬움
화면 업데이트 구현이 쉬움
-
업데이트 : 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것
-
React는 선언형 프로그래밍이라서 화면 업데이트를 구현하기 쉬움
- 선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법. 과정은 상관없고, 원하는 것만 불러옴
- 명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식
-
기존의 Javascript는 명령형 프로그래밍 방식이기 때문에 업데이트를 구현하려면 모든 과정을 하나 하나 다 설명해야 하고, 코드가 길고 복잡해짐
-
React는 Component라는 것을 통해 웹 페이지를 개발한다고 했는데, 각각의 Component에는 State라는 것을 통해 상태를 저장함
-
이 State 값이 바뀌면 Component가 바뀐 State값에 따라서 각각 다른 UI를 화면에 렌더링하도록 설정해줌. State변수 값이 1로 바뀌면 1번 UI를 렌더링, 2로 바뀌면 2번 UI로 렌더링하도록 설정할 수 있어서 훨씬 더 편하고 간결하게 업데이트 구현 가능
-
즉, React는 업데이트를 위한 복잡한 동작을 직접 정의할 필요없이, 특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 가능
화면 업데이트가 빠르게 처리됨
- 브라우저 렌더링 과정(Critical Rendering Path)
- HTML -> DOM, CSS -> CSSOM
- DOM, CSSOM을 합쳐서 Render Tree를 형성
- 요소들의 layout 작업
- 요소를 실제 화면에 그리는 paint
- Javascript가 DOM을 수정하게 되면 업데이트 발생
- 이럴 경우 Critical Render Path를 처음부터 진행
- 즉 DOM, CSSOM을 형성 -> Render Tree를 형성 -> 다시 모든 요소들의 layout 작업(Reflow) -> 다시 모든 요소를 화면에 그리는 paint 작업을 처음부터 진행(Repaint)
- Critical Render Path 중 Layout과 Paint 과정이 제일 오래 걸리는 작업
- 업데이트를 한 번에 모았다가 해주는 것이 중요한데, React는 Virtual DOM을 이용해서 진행함
- Virtual DOM
- DOM을 Javascript 객체로 흉내낸 것으로 일종의 복제판
- React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해 놓음
- 위처럼 동시에 3개의 업데이트가 발생했다고 했을 때, React는 먼저 Javascript 객체인 virtualDOM에 업데이트를 발생한 순서대로 반영함
- 동시에 발생한 업데이트들이 다 모이면 한 번에 반영해서 DOM을 업데이트 함
- 일종의 버퍼역할을 해서 업데이트들을 저장해놓음
2. React App 생성해보기
React Application?
- React로 만들어진 대다수의 웹 서비스들은 단순한 웹 페이지의 기능을 넘어서 사실상 애플리케이션에 가까운 다양한 기능들을 제공하므로, 웹에서 동작하는 애플리케이션과 같다는 의미
- React App, React Application이라고 말함
React App 생성 및 폴더, 파일 구조
- 차세대 프론트엔드 개발 툴인 Vite을 이용해서 기본 설정이 적용된 React App을 생성
- npm create vite@latest라고 콘솔에 치고 React, Javascript를 선택하면 기본 설정이 되어있는 React 앱이 설치됨
- React도 node.js 환경이기 때문에 package.json 파일이 있음. 아직 라이브러리들이 설치되지 않았기 때문에 npm install / npm i 명령어를 통해 package.json에 있는 라이브러리들을 설치함
- React 앱을 개발하기 위해 필요한 수많은 라이브러리들이 설치가 됨. 이처럼 필요한 라이브러리들을 vite을 통해 쉽게 설치할 수 있음
- public 폴더는 이미지 파일을 보관하거나, 폰트, 동영상 같은 코드가 아닌 정적인 파일들을 보관하는 저장소
- src 폴더는 소스의 약자로 실제 작성하게 될 React, Javascript 코드들을 보관하는 폴더
- assets 폴더 안에 public 폴더와 비슷하게 이미지, 폰트 등의 정적 파일을 보관할 수 있음. 단 조금의 차이는 있음
- .eslint.cjs 파일은 eslint라는 도구의 설정 파일
- eslint는 개발자들 사이에 코드 스타일을 통일하는 데에 도움을 주는 도구
- .gitignore 파일은 React 앱을 github 같은 곳에 업로드할 때 올리면 안되는 파일들을 명시하는 곳
- index.html 파일은 React 앱의 기본적인 틀 역할을 하는 HTML 코드가 담긴 파일
- React는 Component들을 이 index.html의 DOM을 수정해서 추가하는 방식으로 동작함. 이때 틀이 되는 파일
- vite.config.js 파일은 React 앱을 만들 때 사용한 vite라는 도구의 옵션을 설정하는 파일
React App 실행
- package.json의 scripts를 보면 개발용으로 실행할 수 있는 dev 명령어가 있음.
- npm run dev로 실행하고, localhost 주소로 가면 위 사진처럼 실행이 됨
- h + enter를 누르면 단축키를 알려줌
- 각각 새로고침, url을 보여줌, 브라우저에서 열기, 콘솔 지우기, 앱 종료가 있음
3. React App 구동 원리
- vite를 통해 생성한 React 앱에는 웹 서버가 내장되어 있음
- npm run dev라는 명령어는 React 앱 서버를 가동시켜라라는 명령어
- 위 메세지는 React 앱 서버가 돌아가고 있다는 뜻
- localhost:5173은 우리가 접속할 수 있는 내 컴퓨터의 React 앱 서버 주소
- 위와 같이 접속 가능
- React 앱을 실행하면 먼저 index.html 파일은 브라우저에게 보내줌
- index.html의 body 태그를 보면 비어있는데, script 태그의 main.jsx을 동적으로 추가함
- main.jsx는 index.html의 id가 root인 것을 React의 root로 변환해주고 있음
- render라는 메서드를 호출해서 위에서 만든 root 아래에 App Component를 렌더링
- App.jsx는 html 태그들을 return하고 있음
- 즉, App.jsx가 return하는 태그들을 main.jsx에서 render하고 그것을 index.html에 동적으로 추가해서 화면을 보여주는 것
- 개발자 도구를 열어서 보면, id가 root인 div태그 아래에 렌더링되는 것을 볼 수 있음
