[리액트] 리액트란 무엇인가? (MVC패턴, 리액트의 장점, 리액트로 만든 웹사이트 소개)

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

1장 리액트 시작

• 1.1 왜 리액트인가?
• 1.2 리액트의 특징
• 1.3 작업 환경 설정

 

---

 

1. 리액트란?

리액트란 페이스북이 개발한 자바스크립트 라이브러리다. 리액트를 사용해 컴포넌트를 기반으로한 Single Page Application(SPA)을 만들 수 있다. 여기서 컴포넌트와 Single Page Application이라는 말이 이해가 되지 않는다면 아래의 내용을 확인해보자.

 

1.1 컴포넌트란?

여기서 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 아래 사진을 보자.

 

위에 있는 이미지는 구글 검색 결과 페이지다. 주황색 박스 안에 있는 UI는 맨위부터 주소, 페이지 제목, 페이지 상세설명으로 패턴이 같고 제목을 클릭했을때 해당 페이지로 이동하는 기능을 가지고 있다. 이 주황색 박스처럼  특정 기능을 할 수 있는 독립된 UI를 컴포넌트라고 한다. 리액트에서는 저 주황색 박스를 하나의 컴포넌트로 생성한 후 필요한곳에 불러와 여러번 사용할 수 있다. 

 

리액트가 컴포넌트 기반인 라이브러리라는 의미는 특정 기능을 할 수 있는 UI를 컴포넌트로 만들어 놓고 컴포넌트를 조립해 하나의 웹페이지로 만들기 때문이다.

 

1.2 Single Page Application(SPA)란?

기존 웹사이트는 링크를 클릭하면 서버에서 해당 HTML 문서를 받아와 페이지 전체가 다시 로딩이 되는 불편함이 있었다. 이를 해결하고자 사용자가 페이지 안에 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트할 수 있는 Single Page Application이 등장하였다. 마치 하나의 어플리케이션을 사용하는 것처럼 동작한다고 하여 그 이름이 붙여졌다.

 

리액트가 Single Page Application이라는 의미는 리액트로 만들어진 웹사이트에서 링크를 클릭했을때 서버에서 페이지 전체를 불러오는 것이 아닌 변경된 데이터만 바뀐다는 것이다.

 

2. 다른 프레임워크도 있는데 왜 하필 리액트일까?

리액트는 자바스크립트의 라이브러리다. 과거 자바스크립트는 웹브라우저에서 간단한 작업만이 가능했지만 지금은 웹개발에서 가장 핵심적인 역할을 한다. 하지만 애플리케이션의 규모가 커짐에 따라 순수한 자바스크립트만으로 구조가 큰 애플리케이션을 만들고 관리하는 일은 쉽지 않다. 그래서 대규모 애플리케이션의 구조를 관리하기 위해 수많은 자바스크립트 프레임워크와 라이브러리가 생겼다.

 

 

3. MVC 아키텍쳐

대부분의 프레임워크는 MVC, MVVM, MVW 아키텍처로 애플리케이션을 구조화한다. (이 포스팅에서는 간단히 MVC 패턴만 알아보겠다) MVC는 Model View Controller의 약자로 프레임워크가 작동하는 방식을 의미한다.

 

이 구조화라는 개념이 이해가 잘 안돼 '얄팍한 코딩사전'이라는 유튜브 채널에서 'MVC  웹 프레임워크가 뭔가요'라는 영상을 보며 공부했다. (MVC 패턴에 대해 더 알고싶다면 링크를 클릭해 영상을 보는것을 추천한다) 얄팍한 코딩사전의 말을 살짝 빌리면, "기능이 많은 네이버같은 웹사이트처럼 큰규모의 애플리케이션을 만들때는 코드를 특정기준으로 분리, 모듈화해서 접근한다. 마치 국가기관을 입법 사법 행정으로 나눈것처럼 소프트웨어도 Model, View, Controller로 나누어 코드의 역할을 분담한다."

 

즉 MVC 패턴은 소프트웨어를 구조적으로 나누어 애플리케이션을 더 효율적으로 만들고 관리하기 위한 방식이다.

 

MVC 모델 작동방식

 

3.1 Model, View, Controller가 하는 역할은 다음과 같다

• 모델(Model): 애플리케이션에서 사용하는 데이터를 관리하는 부분
• 뷰(View): 사용자에게 보여지는 부분
• 컨트롤러(Controller): 사용자가 데이터를 클릭하고, 수정하는 것에 대한 이벤트를 처리하는 부분

 

3.2 MVC 패턴으로 돌아가는 순서는 이렇다

1. 서버가 Controller에 요청을 보낸다
2. Controller는 Model에 데이터를 요청하고 받아온다
3. Controller는 데이터를 View에게 넘겨준다
4. View는 화면에 최종데이터를 출력한다

 

MVC패턴의 단점은 데이터가 변할때마다 어떤 변화를 줄지 규칙을 정하는 것이 프로젝트의 규모가 커질수록 복잡해진다는 점이다. 

 

4. 리액트의 장점!

4.1 정말 멀리 돌아왔다. 위의 내용을 요약하자면 

1. 대규모 애플리케이션의 구조를 관리하기 위해 수많은 자바스크립트 프레임워크와 라이브러리가 생겼다
2. 리액트는 그중 하나다
3. 대부분의 자바스크립트 프레임워크는 MVC 패턴이다
4. MVC패턴의 단점은 데이터가 변할때마다 어떤 변화를 줄지 규칙을 정하는 것이 프로젝트의 규모가 커질수록 복잡해진다는 점이다

 

여기서 리액트의 장점이 빛을 발한다. 리액트는 데이터가 변할 때마다 어떤 변화를 주는것이 아니라 기존 View를 날려버리고 처음부터 다시 렌더링한다.

 

5. 리액트는 어떻게 작동하는가

리액트의 장점은 오직 View만 신경쓴다는 점이다. 그것이 어떻게 가능할까? 리액트가 어떻게 작동하는지 알아보자. 

 

애플리케이션을 정상적으로 작동시키기 위해 두가지 과정을 거친다. 

1. 애플리케이션을 처음 화면에 보여줄때 (초기 렌더링)
2. 변경된 데이터를 업데이트해줄때 (업데이트)

리액트의 초기렌더링과 업데이트

 

5.1 초기 렌더링

애플리케이션을 처음 화면에 보여줄때 render()함수를 거친다. render 함수는 뷰에 대한 정보를 지닌 객체를 반환한다. render 함수에서 반환된 객체에서 HTML 마크업을 만든 후 웹 브라우저에 DOM을 만들어 전달한다.

 

5.2 업데이트

컴포넌트에 변화가 있을 때 초기 렌더링과 같은 과정을 거친다. render()함수를 거쳐 객체를 반환한 후 HTML 마크업을 만들고 웹브라우저에 DOM을 만들어 전달한다. 여기서 기존에 있던 DOM을 없애고 새로운 DOM을 넣는것이 아닌 기존 DOM과 새로운 DOM을 비교한 후 둘의 차이를 알아내 바꿔주어야할 부분만 DOM 업데이트를 한다.

 

리액트에서 데이터가 변경됬을때 새로운 DOM을 처음부터 불러오는 것이 아닌 필요한 부분만 업데이트해주기 때문에 성능을 아끼고 최적의 사용자 경험을 제공할 수 있게 된다.

 

더 자세한 내용은 Virtual DOM이란? (브라우저 동작 원리)에서 살펴보자.

 

6. 리액트로 만들어진 유명한 웹사이트

1) Facebook

 

2) Netflix

 

3) Airbnb

 

4) CNN

 

5) Telsa