What is React

mje807·2021년 6월 16일
1

What is React

SPA(Single Page Application)

말그대로 하나의 페이지로 동작하는 어플리케이션 입니다. 반대의 개념으로 MPA (Multi Page Application)도 존재합니다.
이전부터 많이 사용하던 JSP/Servlet 과 같은 기술들이 MPA를 지원하는 방식입니다.

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

MPA는 서버로부터 받은 HTML 페이지를 렌더링하는 방식이라면 SPA 방식은 서버로부터 데이터만 받아오고 하나의 페이지에서 화면을 동적으로 렌더링하는 방식입니다.
이와 같은 SPA는 많은 장점을 가지고 있습니다.
1. 첫 번째로 기존 MPA는 서버로부터 HTML 페이지를 받는데 있어서 중복되는 HTML태그들을 포함한 데이터의 크기가 큰 반면에 SPA는 화면에 필요한 데이터만 JSON형식으로 전달받기 때문에 데이터의 크기가 상대적으로 작습니다.
2. 두 번째로는 필요한 데이터만 받아올 수 있는 점입니다. MPA에서는 화면에 구성된 Header나 Footer와 같이 레이아웃적인 요소들도 변경되지 않아도 매 요청마다 전달받는 반면에, SPA 에서는 변경되어 필요한 데이터만 전송을 받아 원하는 부분의 화면요소만 바꿀수 있다는 점 입니다.

위의 두가지 장점들을 볼때 페이지 전체의 로딩이나 렌더링 부분에서 더 적은 자원을 사용하기 때문에 전반적인 성능 향상에도 이점을 가져올 수 있습니다.

React

React는 기본적으로 SPA를 지원하는 JavaScript의 라이브러리로써 UI(사용자 인터페이스)를 구성하는데 사용됩니다.
React는 화면의 가장 작은단위 요소인 수많은 컴포넌트로 화면을 구성합니다. 이 수많은 컴포넌트들은 재사용될 수 있으며 이를 통해 UI를 빠르고 효율적으로 구성할 수 있습니다.

저는 앞으로 React를 사용하여 작은 예제와 함께 어플리케이션을 구축할 예정입니다.
이 과정을 이해하기 위해서는 다음과같은 요구사항이 필요합니다.

  1. HTML, CSS에 대한 이해
  2. JavaScript (ES6) 프로그래밍에 대한 기본적인 지식
  3. 전역으로 설치된 Node.js, npm

위와같은 요구사항을 만족한다면 React를 이해할 준비가 되었습니다.
간단한 프로젝트를 구성해서 React에 대하여 천천히 이해해보도록 하겠습니다.
React를 만든 FaceBook에서는 React앱을 빌드하기위한 기본 구성을 제공합니다.

$ sudo npm install -g create-react-app

먼저 npm을통해 create-react-app 을 전역으로 설치합니다.

$ npx create-react-app my-todolist

이후 create-react-app을 통하여 기본적인 React앱을 구성합니다.

$ cd my-todolist
$ npm start

npm start를 통하여 구성된 React앱을 시작합니다.


그러면 우리는 React의 로고가 돌아가고있는 간단한 React앱을 생성한 것을 확인할 수 있습니다.

생성된 패키지들을 확인하겠습니다.

먼저 public 패키지의 index.html을 확인해 보겠습니다.

이 html파일은 React앱의 진입점이며 body태그에 있는 root div가 있는걸 확인할 수 있습니다.

<div id="root"></div>

앞으로의 React 코드들은 이 root아래서 렌더링되며 index.html 한개의 페이지로 여러개의 화면들을 동적으로 구성할 수 있습니다.

다음으로 코드들이 있는 src패키지로 이동하겠습니다.

실질적인 React 앱 에서의 root라고 볼 수 있으며, 필요한 css파일과 react, react-dom 라이브러리가 import 되어있습니다.
App이라는 이름의 컴포넌트 또한 import 되어있으며, public 패키지의 index.html파일의 root에 하위로 App 컴포넌트를 렌더링 하고 있습니다.

화면에 보여지고있는 요소들을 담고있는 React 컴포넌트로써 함수형 컴포넌트로 구성되어있습니다. 아래 구성된 코드들은 JSX문법을 사용하여 작성되어있으며 JSX문법은 뒤로 넘어가서 확인해 보도록 하겠습니다. 우리는 아래 작성된 코드 중에서 ‘Learn React’ 를 ‘Hello React’로 변경하고 저장해보도록 하겠습니다.
화면을 다시 확인해보면 ‘Learn React’라는 문구가 ‘Hello React’로 변경된 것을 확인할 수 있습니다.

이 파일은 React 앱을 구성하는데 있어서, 필요한 라이브러리와 의존성을 구성할 수 있으며, 앱에 사용되는 script들을 구성할 수 있습니다.
앞으로 추가되는 라이브러리들은 이 파일에 정리될 예정이며 이는 npm 또는 yarn으로 관리할 예정입니다.

다음부터 React로 구성된 어플리케이션을 하나씩 만들어 가보도록 하겠습니다. 앞으로의 글에서 React에서 사용하는 기술, 패턴을을 정리하며 실제로 어떻게 적용되는지 살펴보겠습니다.

profile
🇰🇷🧑‍💻

0개의 댓글