리액트의 장점과 단점 [처음 만난 리액트 #6]

1강. 리액트 소개 

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

리액트의 장점

장점1. 빠른 업데이트 & 렌더링 속도 

업데이트: 웹 사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것 

메뉴를 누르고 새로운 내용이 뜨기까지 시간이 오래걸리면, 사용자가 기다리지 못하고 나가버릴 수도 있기 때문에 빠른 업데이트는 웹사이트에서 중요

 

Virtual DOM

React는 빠른 업데이트를 위해 내부적으로 Virtual DOM을 사용

 

DOM이란?

Document Object Model

웹페이지를 정의하는 하나의 객체

하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇

 

크롬 브라우저에 개발자 도구를 열어 Console 탭에서 document라고 입력

 

▲ 리액트 공식 웹사이트 정보가 모두 담겨있는 Document Object Model

 

Virtual DOM

● 가상의 DOM (실제 DOM이 아님)

● 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 함 

 

Virtual DOM이 어떻게 업데이트를 빠르게 할까?

일반적으로 사용자와 상호작용을 하는 웹페이지의 경우 화면의 업데이트가 수시로 이루어짐

DOM이 웹사이트 정보를 모두 담고있기 때문에 화면이 업데이트 = DOM이 수정

● 기존의 방식으로 화면을 업데이트하려면 DOM을 직접 수정해야 하는데, 이것은 성능에 영향을 크게 미치고 비용도 많이 드는 작업 (수정할 부분을 DOM의 데이터에서 모두 찾아야 하기 때문)

● 리액트는 DOM을 직접 수정하는 것이 아니라 업데이트 해야 할 최소한의 부분만을 찾아서 업데이트

 

 

Virtual DOM: 상태의 변경(State Change)이 일어나면 업데이트 해야 할 최소한의 부분을 검색(Compute Diff)하고 검색된 부분만을 업데이트하고 다시 렌더링(Re-render)하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있음

 

장점2. Component-Based

컴포넌트 기반의 구조

 

Component란?

● 구성요소라는 뜻

● 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음

● 레고 블록 조립하듯 컴포넌트들을 모아서 웹사이트를 개발

 

 

에어비엔비 웹사이트도 리액트를 사용되어 개발

설레는 다음 여행을 위하는 아이디어 영역과 에어비엔비 체험 둘러보기 영역의 그림과 글자배치, 구조가 동일 -> 리액트의 컴포넌트 

● 아이템을 나타내는 컴포넌트 또한 내부적으로는 다른 컴포넌트들의 조합으로 구성되어있고, 이런 컴포넌트들이 모여서 전체 페이지를 구성

● 전체 페이지도 하나의 컴포넌트

 

 

● A라는 컴포넌트는 여행할 지역을 나타내는 컴포넌트, B라는 컴포넌트는 체험 프로그램을 나타내는 컴포넌트

● 이 페이지에서는 A와 B 컴포넌트가 반복적으로 사용

-> 리액트로 개발된 웹사이트는 수많은 컴포넌트의 조합으로 이루어져 있음

 

컴포넌트 기반 구조의 장점? 재사용성 (Reusability)

● 다시 사용이 가능한 성질

● 재활용과 재사용은 어떻게 다를까?

재활용은 다시 활용이 가능한 자원을 가공하여 새로운 제품을 만드는 것이고, 재사용은 계속해서 다시 사용이 가능한 성질을 의미함

물리적인 물질은 쓰면 쓸수록 닳기 때문에 기본적으로 재사용이 불가능하기때문에 주로 재사용이라는 개념은 소프트웨어 분야에서 쓰임

 

But 모든 소프트웨어가 어떤 곳에서든 재사용이 가능한 것은 아님

 

 

 

● A 프로그램에서 쓰던 Calendar 모듈을 B 프로그램에서 적용하려고 했더니, Calendar 모듈은 date 모듈에 의존성이 있어서 date 모듈 없이는 독립적으로 재사용이 불가능

● String 모듈의 경우 다른 모듈에 의존성이 없기 때문에 독립적으로 재사용이 가능

 

재사용을 하려고 할 때 의존성 문제 말고도 여러 호환성 문제가 발생할 수 있음

소프트웨어를 개발할 때 재사용성이 높게 개발해야 함 => 해당 소프트웨어 또는 모듈이 다른 곳에도 쉽게 쓸 수 있도록 개발하는 것을 의미 

다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발해야 함 

 

왜 재사용성을 높여야 할까?

1. 개발 기간이 단축됨

비슷한 소프트웨어를 개발한다고 할 때, 기존에 개발해둔 모듈을 곧바로 재사용하여 개발하면 되기 때문

 

2. 유지 보수가 용이함

● 만약 여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정해서 배포하면 됨

● 소프트웨어를 개발하다보면 예상치 못한 버그를 마주치는 상황이 빈번하게 발생하는데, 이런 경우 재사용성이 높은 형태로 개발되어있다면 좀 더 버그의 원인을 찾기 쉬움

재사용성이 높다는 것은 여러 모듈간의 의존성이 낮다는 의미이기 때문에 각 부분들이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있음

 

리액트와 재사용성

● 리액트는 컴포넌트 기반의 구조

● 각 컴포넌트들은 웹사이트의 여러 곳에서 반복적으로 사용될 수 있음 = 하나의 컴포넌트가 계속해서 재사용될 수 있다는 의미 

 

리액트 컴포넌트를 개발할 때 쉽고 재사용 가능한 형태로 개발하는 것이 중요! 

나중에 다른 웹사이트도 쉽고 빠르게 개발이 가능

 

장점3. 든든한 지원군, Meta

● 리액트는 전 세계 최대 IT 기업 중 하나인 Meta가 만든 오픈소스 프로젝트

● 꾸준한 버전 업데이트가 이루어지며 발전하고 있음 

● 현재 시점에서는 가장 인기있는 라이브러리

 

오픈소스 프로젝트라고 해서 모든 것이 무료로 알아서 돌아가지는 않음

자본이 투입되어야 오픈소스 프로젝트도 유지됨 

 

프로젝트가 성장하고 꾸준히 유지되기 위해서는 수많은 개발자의 노력이 필요 - 간단한 버그를 수정하는 정도가 아니라 제대로 오픈소스 개발을 하려면 돈을 주고 일을 시킬 수 밖에 없음

인기있는 오픈소스 프로젝트의 경우 보통 스폰서가 있음 

 

장점4. 활발한 지식공유 & 커뮤니티

리액트의 가장 큰 장점이자 현재의 영향력을 가지게 된 이유

 

새로운 기술이 등장하는 초창기에는 해당 기술을 처음 사용하다가 모르는 것이 등장하여 진행이 막히거나 더뎌지는 경우가 생김

개발생태계와 커뮤니티가 잘 갖춰지지 않으면 원하는 답을 얻기가 힘듦 

-> 활발한 지식공유와 활성화된 커뮤니티는 리액트의 매우 큰 장점이자 중요한 부분

 

● 리액트라는 프로젝트는 개발자들로부터 엄청난 관심을 받고 있으며, 실제 사용하고 있는 개발자들도 매우 많음 

● 개발을 하다가 막히면 도움을 청할 커뮤니티가 아주 잘 구축되어 있음

 

 

오픈소스 플랫폼인 깃허브의 리액트 프로젝트 페이지

● 오픈소스 프로젝트는 스타 개수를 인기 지표로 판단 

- 리액트의 경우 18만 1천개 정도로, 모든 오픈소스를 통틀어 최상위급 수치

● 프로젝트를 지켜보는 사람 수를 나타내는 watch도 6700명 가까이 됨 

 

 

● 특정 기술의 생태계 규모를 판단하는 지표로, stack overflow 웹사이트에서 해당 기술이 얼마나 많이 언급되는지를 참고하기도 함 

* stack overflow: 개발자가 개발과 관련된 질문과 답변을 공유하는 커뮤니티, 개발을 하다가 막힐 때 해답을 얻기 위해 가장 많이 찾는 곳 중 하나

 

● 리액트 관련 질문이 이미 35만 8천개 가량 등록되어 있으며, 리액트 태그를 지켜보는 사람 수가 29만 5천명 가까이 되는 어마어마한 수치 

 

장점5. React Native

 

 

React를 배운 이후에, React Native라는 모바일 환경 UI 프레임워크를 이용해 모바일 앱도 개발할 수 있음

 

보통 모바일 앱을 개발하기 위해서, 안드로이드 앱의 경우 코틀린이라는 프로그래밍 언어를 배워야 하고, IOS 앱은 swift라는 별도의 프로그래밍 언어를 배워야 함

프로그래밍 언어 뿐만 아니라 각각의 개발 프레임워크에 대해서도 학습해야 함 

 

React Native를 사용하면, JavaScript로 한 번 코딩을 해서 안드로이드 앱과 IOS 앱을 동시에 만들 수 있음

---

 

리액트의 단점

단점1. 방대한 학습량

리액트는 기존과는 다른 방식의 UI 라이브러리이기 때문에 배워야할 것들이 많음

● Virtual DOM, JSX, Component, State, Props 등의 새로운 개념들이 많이 등장

● 계속해서 무언가 바뀌기 때문에 바뀌는 부분에 대해서도 꾸준히 공부해야 함

 

 

계속해서 버전 업데이트가 이루어지고 있어 새로운 내용들이 계속 등장

 

단점2. 높은 상태관리 복잡도

State: 리액트 컴포넌트의 상태 

Virtual DOM에서는 바뀐 부분만을 찾아서 업데이트 - 바뀐 부분이 state가 바뀐 컴포넌트를 의미

 

성능 최적화를 위해 State를 잘 관리하는 것이 중요한데, 웹사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태관리의 복잡도도 증가

보통 큰 규모의 프로젝트의 경우, 상태관리를 위해 리덕스, 리코일 등의 외부 상태관리 라이브러리를 사용하는 경우가 많음 

 

상태 관리의 기본 개념을 제대로 이해하자!