[7주차] React와 Create React App

3월 2일 자 학습 내용 정리입니다.

 

 

✅ SPA

 

출처 : https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/november/asp-net-single-page-applications-build-modern-responsive-web-apps-with-asp-net

 

전통적인 페이지 방식은 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청해 HTML을 전달받는다.

이 과정에서 페이지는 변경이 필요할 때마다 처음부터 끝까지 다시 로드된다.

 

반면 SPA(Single Page Application)는 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분만 JSON으로 전달받는다.

그리고 페이지에서 변경된 부분만 계산해 다시 그린다.
예를 들어 사용자가 로그인에 성공했다면 서버가 로그인이 성공했다는 메세지를 JSON 형식으로 보내는 식이다.
클라이언트는 이 메세지를 받고 로그인에 관련된 페이지가 어떤 변경이 필요한지 알 수 있다.

React는 SPA 방식을 따른다.

 

 

✅ React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

 

React의 특징은 다음과 같다.

• 컴포넌트 기반이다.
  • 컴포넌트는 스스로 상태를 관리할 수 있고 캡슐화되어있다.
  • 레고처럼 컴포넌트를 조합해 복잡한 UI를 만들 수 있다.
• 선언형이기 때문에 데이터가 변경되면 적절한 컴포넌트만 갱신하고 렌더링한다.
  • 이는 코드를 예측하고 디버깅하기 쉽게 만들어준다.
• Virtual DOM을 사용한다.
  • 페이지 변경이 있으면 가상적인 표현을 메모리에 저장한다.
  • 이후 React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화한다.

 

 

✅ Create React App

Create React App(CRA)은 React 프로젝트를 쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate)이다.
여기서 보일러플레이트란 최소한의 변경으로 여러 곳에서 재사용될 수 있으며 반복적으로 비슷한 형태를 띄는 코드를 말한다.

즉, Create React App은 React 프로젝트 생성에 필요한 다양한 기능을 Command로 제공한다.

Create React App외에도 수많은 React용 보일러플레이트가 있지만 Create React App은 React를 만든 Facebook에서 직접 만들어 관리하기 때문에 가장 많이 쓰인다.

 

Create React App의 장점은 다음과 같다.

1. 개발자가 React App 개발에 집중할 수 있다.
2. 대부분의 브라우저에서 해석될 수 있도록 프로젝트 배포 시 해야하는 Babel, Webpack등의 트랜스컴파일과 번들링을 지원한다.

 

✔️ React 프로젝트 생성

React 프로젝트를 생성하는 명령어는 다음과 같다.

 

$ npx create-react-app [project name]
$ yarn create react-app [project name]

 

이때 npx란 npm 패키지를 일회성으로 내려받아 실행할 때 사용하는 명령어이다.

 

 

yarn create react-app my-app을 실행한 모습이다.

사진과 같이 my-app이라는 프로젝트 디렉터리가 생성되고 그 아래 react 관련 폴더, 파일들이 생성된 것을 확인할 수 있다.

이를 실행하기 위해서는 cd 명령어를 통해 my-app으로 이동 후 해당하는 명령어를 사용해야 한다.

 

✔️ React 프로젝트의 디렉터리 구조

React 프로젝트를 생성한 이후 기본적인 프로젝트의 디렉터리 구조는 다음과 같다.

 

• node_modules : npm 혹은 yarn을 이용해 설치한 패키지들의 모음.
• public : 정적 파일들을 모아놓는 곳
• src : 리액트 개발을 위한 파일들을 모아놓는 곳
• .gitignore : git을 이용할 경우 불필요한 파일을 무시할 수 있도록 하는 설정 파일
• package.json : 프로젝트에 관한 정보와 사용하는 패키지들을 작성하는 파일
• README.md : 프로젝트에 관한 설명을 작성하는 파일

 

 

🔍 참조

react https://ko.reactjs.org/

보일러플레이트 https://charlezz.medium.com/%EB%B3%B4%EC%9D%BC%EB%9F%AC%ED%94%8C%EB%A0%88%EC%9D%B4%ED%8A%B8-%EC%BD%94%EB%93%9C%EB%9E%80-boilerplate-code-83009a8d3297