[리액트 스타터 3] 1장. 리액트 시작

1.1 왜 리액트인가?

최근 몇 년간 많은 개발자들은 자바스크립트에 뜨겁게 열광하고 있습니다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 지금은 애플리케이션에서 가장 핵심적인 역할을 합니다.

우리는 그중에서 자바스크립트 라이브러리를 사용하여 사용자 인터페이스를 만들고, 최대한 성능을 아끼며 편안한 사용자 경험을 제공하는 리액트에 대해서 알아보고자 합니다.

 

 

1.1.0 MVMM과 MVC

MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)는 프레임 워크의 아키텍쳐(구조) 입니다.

이 두 가지 구조의 공통점은 모델과(Model) 뷰(View)가 있다는 것입니다. 여기서 모델은 애플리케이션의 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 영역입니다. 컨트롤러(Controller)는 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영합니다.

 

 

1.1.1 리액트란 무엇일까?

애플리케이션에서 값의 변형이 일어난다면, 우리는 업데이트를 통해 요소를 찾아 수정해야 할 것입니다. 그러나 애플리케이션의 규모가 크고 복잡하며 관리가 제대로 되고 있지 않다면, 변경하는 작업의 성능이 저하될 수도 있습니다. 이러한 점을 해결하고자 고안된 아이디어가 있는데요. 데이터가 변경되면 기존의 뷰를 수정하는 것이 아닌 기존의 뷰를 버리고 아예 처음부터 새로 렌더링하는 것입니다. 이렇게 한다면 어떻게 변화할지 신경 쓰는 것 대신 그냥 규칙에 따라 새로 렌더링하면 되기 때문입니다. 그러나 이런 방식도 CPU의 점유율을 상승시켜 Dom을 느리게 하고 메모리를 많이 사용하는 등의 단점이 생깁니다. 그래서 앞의 방식을 사용하되, 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어진 것이 리액트(React) 입니다.

 

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MNW 등인 프레임 워크와 달리 오로지 뷰(View)만 신경 쓰는 라이브러리입니다. 리액트는 지속해서 데이터가 변화하는 대규모 애플리캐이션 구축에 유리하며, 업데이트 처리의 간결성을 제공합니다.

 

 

1.1.2 컴포넌트란 무엇일까?

컴포넌트(Component)는 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 입니다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다루기 위해 사용하는 템플릿과는 다릅니다. 템플릿은 데이터셋(데이터 자료의 집합체)이 주어지면 HTML 태그 형식으로 문자열을 반환합니다.

그러나 컴포넌트는 API를 통해 많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의합니다. (개념적으로 컴포넌트는 자바스크립트 함수와 유사) 

 

 

1.1.3 렌더링이란 무엇이며, 초기 렌더링과 리렌더링의 차이점은 무엇일까?

렌더링은 사용자 화면에 뷰를 보여주는 것입니다. 리액트에서는 Render 함수를 사용하여 최초로 실행하여 맨 처음 어떻게 보일지 결정하는 초기렌더링을 다룹니다.

• render() {......}

Render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 하며, HTML 형식의 문자열 대신 뷰가 어떻게 작동하는지에 대한 정보를 가진 객체를 반환합니다. render 함수를 통해 컴포넌트의 렌더링 작업이 끝나면 HTML 마크업을 만들고 이를 DOM요소에 주입합니다. 그래서 컴포넌트를 실제 페이지에 렌더링할 때는 크게 두 가지 절차를 따릅니다.

1. 문자열 형태의 HTML 코드를 생성합니다.
2. 특정 DOM에 대한 해당 내용을 주입합니다.

리렌더링은 컴포넌트의 데이터 변경으로 다시 실행되는 것입니다. 리액트에서는 뷰를 업데이트하는 것을 조화과정이라고 합니다. 컴포넌트의 데이터에 변화가 생기면 새로운 요소로 갈아 끼웁니다. 컴포넌트에 새로운 데이터가 업데이트 되었을 때 업데이트한 값을 수정하는 것 대신 새로운 데이터를 가지고 render 함수를 다시 한번 호출하여 그 데이터가 지닌 뷰를 생성합니다.

이때  render 함수가 반환하는 값을 바로 Dom에 보내지 않고 이전의 render 함수가 만들어낸 컴포넌트의 정보와 최소한의 연산으로 비교해서 차이가 존재하는 부분만 업데이트를 진행합니다.

 

 

 

1.2리액트의 특징

 

1.2.0 Dom이란?

Dom은 Document Object Model의 약어로, 객체 문서 구조를 표현하는 방법입니다. XML이나 HTML로 작성합니다.

Dom은 동적 UI에 최적화되어있지 않기 때문에 큰 규모의 애플리케이션에서 Dom에 직접 접근하여 변화를 주려고 하면 느려지는 문제가 발생합니다. Dom 자체는 빠르지만, 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하는 등의 과정에서 시간 허비의 문제가 발생하게 되는 것입니다.

 

이를 해결하기 위해서는 Dom을 최소한으로 조작해야 합니다. 리액트는 Virtual Dom 방식을 통해 Dom 업데이트를 추상화하여 Dom 처리 횟수를 최소화하고 효율적으로 진행합니다.

 

 

1.2.1 Virtual Dom이란?

Virtual Dom은 실제 Dom 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. (Dom의 사본과 비슷합니다.)

 

리액트에서 데이터가 변화하여 웹브라우저에 실제 Dom을 업데이트할 때는 다음 세 가지 절차를 밟습니다.

1. 데이터를 업데이트하면 전체 UI를 DOM에 리렌더링 합니다.
2. 이전 Virtual Dom에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 Dom에 적용합니다.

Virtual Dom을 사용한다고 해서 항상 빠른 것은 아니며, 적절한 곳에 사용해야 합니다.

 

 

---

Corner React #3

Editor : 니나노