유데미 리액트 강의 34. React.js 소개

🤔 React.js란?

Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리.

대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술이다.

넷플릭스,페이스북,인스타그램 등이 대표적인 React로 개발되어진 서비스이다.

코드너리(codenary.co.kr) 에 따르면

해외 뿐 아니라 국내에서도 이미 많은 기업들이 사용하고있고 VueJS의 두배 가량으로

압도적인 사용량을 보여주고 있다.

🤔 React의 기술적인 특징은 무엇이 있을까?

여러가지 특징이 있지만 핵심적인 특징은 다음과 같다.

• 컴포넌트를 기반으로 UI를 표현

• 화면 업데이트 구현이 쉽다.

• 화면 업데이트가 빠르게 처리된다.

등의 특징이 있다.

✍️ 강사님 말씀

입문하는 입장에서는

모든 내용을 완벽히 이해할 필요는 없다.

대략적으로 흝어보듯이 듣는 걸 권장한다.

완강 후 다시 돌아오는 것을 추천한다.

📚 기술적인 특징 1. 컴포넌트를 기반으로 UI를 표현한다.

컴포넌트(Component)는 우리말로 "구성요소" 라는 뜻

화면을 구성하는 요소, UI를 구성하는 요소를 말함.

예를 들어 이렇게 구현해야하는 웹페이지가 Header , Main, Footer 세가지로

나뉘어져있다면 리액트에서는 각각의 영역을 분리해서 각각의 js파일에

컴포넌트 단위로 나눠서 모듈화해서 보관이 가능이 가능하므로

그리고 추후 여러개의 컴포넌트를 합쳐 레고처럼 조립해서 구현이 가능하다.

HTML로 직접 Header를 마크업을 할 때

다른 페이지이지만 이렇게 동일한 Header를 쓰게 된다면?

페이지는 여러개 만들어야하는 상황이 발생할 수 있기 때문에

추후 중복코드로 인해 유지보수가 매우 어려워질 수 있다.

하지만 리액트에서는 모든 요소를 컴포넌트 단위로 모듈화해서 개발을 하기 때문에

예를 들어 모든 페이지에서 Header.js처럼 공통으로 필요하는 요소가 있을 때

이런식으로 Header.js라는 컴포넌트를 불러와서 사용하기만 하면 되기 때문에

추후 수정을 해야할 필요가 있더라고 해당 컴포넌트만 수정하기 때문에 굉장히 수월하다.

📚 기술적인 특징 2. 화면 업데이트 구현이 쉽다.

🤔 업데이트가 뭐지?

사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것

React.js에서는 화면 업데이트를 구현하기 매우 쉽다.

React.js는 선언현 프로그래밍으로 동작하기 때문이다.

🤔 선언형 프로그래밍이 뭐지?

과정은 생략하고 목적만 간결히 명시하는 방법

동작할지 세부 구현을 명시하지 않고, 결과를 선언하는 방식이다.

프로그래머는 목적이나 결과를 기술하고,

구체적인 실행 절차는 내부 시스템이나 라이브러리가 처리한다.

예를 들어 마치 우리가 식당에서 "크림 파스타 하나 주세요" 라는 내용으로

음식을 주문하는 것과 매우 유사함.

선언현 프로그래밍과 반대되는 것은 명령형 프로그래밍이 있다.

🤔 명령형 프로그래밍이 뭐지?

목적을 이루기 위한 모든 일련의 과정을 설명하는 방식

배달시스템으로 비유하자면 마치 진상(?) 손님처럼 주문 하는 방식이라고 보면 된다.

배달오기까지의 모든 과정을 일일이 설명하는 방식이라고 생각하면 된다.

"주방으로 가셔서 면 100g을 꺼내세요. 그리고 뜨거운 물에 9분간 삶으세요.
그런 다음 후라이팬을 꺼내 불을 올리고 토마토 소스와 함께 볶으세요.
다 되었다면 접시에 담아서 배달해주세요."

🥊 선언형 프로그래밍 vs 명령형 프로그래밍

리액트를 사용하지않고 JavaScript만을 사용한다면 특별한 도구를 사용하지 않는 이상은

보통은 명령형 프로그래밍으로 모든 것을 구현해야하기 때문에 코드가 복잡해진다.

반대로 선언형 프로그래밍은 매우 간단하게 구현이 가능하다.

🤔 구현이 간단해지는 원리가 무엇일까?

이렇게 페이지를 컴포넌트 단위로 나눠서 개발하게 되는데

컴포넌트엔 현재 상태를 의미하는 State 라는 특수한 변수를 저장할 수 있다

이 바뀐 State의 상태에 따라 각각 다른 UI를 보여줄 수 있다.

💡 결론은?

리액트 같은 선언현 프로그래밍에서는

업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이

특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 시킬 수 있다.

📚 기술적인 특징 3. 화면 업데이트가 빠르게 처리된다.

React.js 에서는 화면 업데이트를 쉽게 구현할 수 있으면서

동시에 빠르게도 처리해준다.

🤔 어떠한 원리로 이런 것이 가능할까?

이 원리를 알려면 먼저

• 브라우저가 어떻게 동작하는가?

• HTML, CSS로 만든 페이지를 어떻게 렌더링 하는가?

• 화면 업데이트는 어떻게 처리 되는가?

이러한 선수 지식을 먼저 알아야한다.

📚 브라우저의 렌더링 과정.1 - DOM,CSSOM

브라우저의 렌더링 과정(Critical Rendering Path)을 단계별로 살펴보자면 먼저

HTML과 CSS는 각각 DOM과 CSSOM로 변환을 하게된다.

🤔 알고 넘어가자 - DOM, CSSOM이 뭐지?

DOM(Document Object Model)은

HTML 문서 내의 코드를 브라우저가 자기가 이해하기 좀더 쉬운

형태로 변환한 것인데 일종의 객체 모델로 변환한 것이다.

CSSOM(CSS Object Model) 도 DOM과 비슷한 형태로

CSS 스타일을 객체 형태로 표현한 구조이다.

이 두가지 요소가 결합되어 브라우저가 렌더 트리를 생성하고 화면에 표시하게 된다.

📚 브라우저의 렌더링 과정.2 - Render Tree

CSS와 HTML을 객체 모델의 형태로 변환하였으면 두가지를 합쳐서

Render Tree를 만들게 된다.

• DOM : 요소들의 위치,배치,모양에 관한 모든 정보
• CSSOM : 요소들의 스타일과 관련된 모든 정보

이 두가지를 합친 Render Tree에는 화면에 렌더링되어져야하는 모든 것들이 들어있다.

일종의 청사진이라고 생각하면 된다.

📚 브라우저의 렌더링 과정.3 - Layout

그다음엔 요소의 배치를 잡는 작업을 하게되는데 이 작업 과정을 Layout 과정이라고 한다.

웹 페이지 내에 공간에 Header는 어디에 두고 Body는 어디에 두고...

흔히 우리가 일상에서 방 내부 구조를 정하는 것과 비슷하다.

📚 브라우저의 렌더링 과정.3 - Painting

마지막 과정은 위 과정을 거쳐온 것을 바탕으로 실제로 화면에 그려내는 과정을 의미한다.

🤔 그래서 업데이트는 어떻게 일어나는 건데?

바로 JavaScript가 DOM을 수정하면 업데이트가 발생한다.

DOM이 수정되면 위 과정을 처음부터 다시 진행한다.

그렇게 되면서 렌더링 요소가 변경되어지면서 업데이트가 되어지는 것이다.

단 Layout,painting 과정에서 처음 했던 것 보다 매우 많은 시간이 걸리게 된다.

이 두과정은 업데이트 시에는 또 다르게 부르는 명칭이 있다.

• Layout -> Reflow

• Painting -> Repaint

라고 불리우게 된다.

만약 수정을 3000번 하게 되면 이 긴 과정을 3000번이나 다시 해야하는 거라 생각하면 된다.

그만큼 성능이 매우 악화될 수 있고 심하면 위 이미지처럼 에러 페이지까지 출력을 하게 된다.

특정 기능을 통해 설명 하자면 이렇게 반복문을 통해 3000번까지 리스트를 출력하는 기능이

있다고 생각해보자. 반복문 내에 $ul.innerHTML이 수정되는 부분은

한번만 실행되어도 총 3000번의 DOM 수정이 발생하게 된다.

이러게 되면 위 이미지의 측정 결과처럼 심각한 성능 저하를 일으키게 된다.

생각을 해보자. 버튼을 한번 눌렀을 때 4.5초동안 기다리라고 한다면?

아마 사용자 입장에서는 말이 안 된다고 생각을 할 것이다.

위 코드는 이러한 화면 업데이트의 특성상 길고 불필요한 DOM수정이 최소화 되어지게끔

수정한 코드이다. 이 코드는 DOM 수정을 딱 한번만 발생하기 때문에 성능이 매우 쾌적해진다.

💡 그래서 결론은?

이처럼 DOM 수정을 최소화해야 성능문제를 일으키지 않기 때문에

동시에 발생한 업데이트를 최대한 모아두었다가 한번만 DOM 수정이 일어나게끔 구현을 해야한다.

하지만! 서비스 규모가 커지면 커질 수록 위 방법처럼 하기는 결코 쉽지 않은 일이 될 것이다.

복잡한 대규모의 서비스에서는 다뤄야할 업데이트,동시에 발생하는 업데이트가 많기 때문이다.

하지만 걱정하지 않아도 된다.

React.js는 이 모든 과정을 자동으로 처리해주기 때문이다!

개발자가 신경쓰지 않아도 **아무리 많은 업데이트가 발생하여도 대부분의 상황에

충분히 빠른 속도로 업데이트가 가능하게끔 도와준다.**

🤔 어떻게 가능한 거지? - Virtual DOM이 있기 때문!

Virtual DOM 이란?

• DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 클론이라고 생각하면 된다.

• React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 클론 DOM에

먼저 반영을 진행한다

• 연습 게임이라고 생각하면 되고 일종의 Buffer 역할도 한다고 생각하면 된다.

위 이미지처럼 동시에 3개의 업데이트가 발생하였다고 가정할 때

순차적으로 가상 DOM에 반영해본다.

이렇게 해서 업데이트가 모인 가상 DOM을 한번에 반영하여 DOM 수정을 1회 실행하게 된다.

가상 DOM은 업데이트를 모아두는 Buffer 역할을 한다고 생각하면 쉽다.

이렇게 함으로써 성능저하를 최소화 할 수 있다.