React : a JavaScript library for building user interfaces
즉, 사용자와 웹 사이트 상호작용을 돕는 인터페이스를 만들기 위한
JavaScript 기능 모음집.
정리를 하자면 ,
웹 사이트를 개발하기 위해서는 HTML, CSS, JavaScript를 모두 잘 다뤄야 한다.
사이트의 규모가 커지면 커질수록 수 많은 페이지를 잘 만들고 관리하기가 쉽지 않다.
그리하여 이러한 복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것이 바로 Reacrt이다.
이전에 SPA (Single Page Application) 에 대해 잠깐 다뤘었는데
하나의 Page만 존재하는 웹 사이트 또는 Web Application을 의미한다.
규모가 큰 웹 사이트의 경우, 수백 개의 페이지가 존재하는데 이것을 각각 Page 마다 HTML로 만드는 것은 매우 비효율적이고 관리 하기도 힘들다.
그래서 HTML을 만들어놓고 사용자가 특정 Page를 요청할때 그 안에 해당 Page 내용을 채워서 보내주는 것이, 바로 SPA이다.
그리고 이번에 배울 React가 바로 이런 SPA를 쉽고 빠르게 만들수 있도록 해주는 도구라고 보면 된다.
웹 사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요!!
React의 장점?
-> 첫번째 장점 : 빠른 업데이트 & 렌더링 속도
빠른 업데이트는 어떠한 메뉴를 누르면 매번 화면의 내용들이 바뀌는 것을 의미한다.
React는 이러한 빠른 업데이트를 위해 Virtual DOM 이라는 것을 사용한다.
Virtual DOM 은 말 그대로 가상의 DOM (Document Of Model)이다.
DOM 은 웹 페이지를 정의하는 하나의 객체라고 생각하면 된다.
즉, 하나의 웹 사이트에 대한 정보를 모두 담고 있는 큰 그릇.
Virtual DOM은 실제 DOM이 아닌 웹 페이지와 실제 DOM 사이에서 매개체 역할을 한다.
어떤 상태의 변경 (State Change)가 일어나면
Vitual DOM에서는 업데이트 해야 할 최소한의 부분을 검색, 컴퓨터 Compute Diff 한다.
그리고 검색한 부분만을 업데이트하고 다시 Rendering하면서 변경된 부분을 빠르게 사용자에게 보여줄 수 있게 된다.
-> 두번째 장점 : Component(구성요소) - based
React에서는 모든 Page가 Component로 구성되어 있고, 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성 될 수 있다.
쉽게 말하면, React로 개발하다 보면 레고 블록을 조립하는 것처럼 Component를 조합해서 웹 사이트를 개발하게 된다.
airbnb 웹 사이트에 처럼 이러한 것들도 React로 개발되었다.
이 웹 페이지에서는 A와 B의 Component로 나눴다.
Component 기반의 구조는 어떤 장점이 있을까?
-> 재사용성(Reusability)
재사용성은 객체지향 프로그래밍을 배울때 등장하는 개념인데, 소프트웨어 개발에 있어 매우 중요한 개념이다.
앞으로 개발할때도 재사용성이라는 개념에 대해서 생각하고 개발하는 습관을 길러야 한다.
재사용성(Reusability) 이란 말 그대로 "다시 사용이 가능한 성질" 을 의미한다.
이 그림과 같이 서로 상호호환이 되야 재사용성이 가능하다.
그래서 소프트웨어를 개발할 때 재사용성이 높게 개발되어야 한다고 하는데, 이 말은 해당 소프트웨어 또는 모듈이 다른 곳에도 쉽게 곧바로 쓸 수 있도록 개발하는 것을 의미한다.
즉, 다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발해야 한다는 의미이다.
재사용성(Reusability)이 높아지면 어떤 장점이 있을까?
-> 장점 1. 전체 소프트웨어 개발 기간이 단축된다.
비슷한 소프트웨어를 개발한다고 할 때 기존에 개발해 둔 모듈을 곧바로 재사용하여 개발하면 되기 때문에 개발 기간을 굉장히 많이 줄일 수 있다.
-> 장점 2. 유지 보수가 용이하다.
만약 여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정해서 다시 배포하면 된다.
또한, 소프트웨어를 개발하다 보면 예상치 못한 버그를 마주치는 상황이 빈번하게 발생하는데 이런 경우 재사용성이 높은 형태로 개발되어 있다면 좀 더 버그의 원인을 찾기가 쉽다.
왜냐하면 재사용성이 높다는 의미는 결국 여러 모듈 간의 의존성이 낮다는 의미이기 때문이다.
그래서 각 부분들이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있다.
React와 재사용성의 연관성
-> 앞에서 말한 거와 같이 React는 Component 기반의 구조로 되어 있다.
이러한 각 Component들은 웹사이트의 여러 곳에서 반복적으로 사용될 수 있다. 즉, 하나의 Component가 계속해서 재사용될 수 있다.
그래서 React Component를 개발할 때 항상 쉽고 재사용 가능한 형태로 개발하는 것이 중요하다. 그러면 나중에 다른 웹 사이트도 쉽고 빠르게 개발이 가능하기 때문이다.
-> 장점 3. Meta 라는 든든한 지원군
React는 메타(Meta)가 만든 오픈소스 프로젝트이다.
React는 전세계 최대 IT 기업 중 하나인 메타에서 시작된 프로젝트이며 꾸준한 버전 업데이트가 이뤄지며 발전하고 있다.
-> 장점 4. 활발한 지식 공유 & 커뮤니티
내가 모르는 것을 바로 바로 찾아서 볼 수 있다는 큰 메리트가 있다.
-> 장점 5. React를 배운 이후, React Native 라는
모바일 환경 UI 프레임 워크 (Flame Work)를 사용해서
모바일 앱도 개발할 수 있다.
보통 모바일 앱을 개발하기 위해서 안드로이드 앱의 경우 Kotlin 이라는 프로그래밍 언어를 배워야 하고, ios앱은 Swift라는 별도의 프로그래밍 언어를 배워야 한다.
프로그래밍 언어뿐 아니라 각각의 개발 프레임워크에 대해서도 학습을 해야 한다. 이 이유 때문에 처음에 앱 개발을 하면 많은 어려움이 있다.
하지만 React Native를 사용하면 자바스크립트로 한번코딩을 해서 안드로이드 앱과 ios 앱을 동시에 만들 수 있다.
물론 네이티브 앱보다 성능이나 속도 면에서 조금 부족한 부분을 보일 수 있지만 간단한 수준의 앱은 사용자가 차이점을 느끼지 못할 정도로 개발 가능하다.
그래서 모바일 앱을 개발하고 싶으면 React 이후 React Native를 공부하면 된다.
React의 단점?
-> 단점 1. 방대한 학습량
모든 라이브러리(Library)가 그렇지만, 특히 React의 경우 기존과는 다른 방식의 UI 라이브러리 이기 때문에 배워야 할 것들이 많다.
ex) Virtual DOM, JSX, Component, State, Props .... 등등
그리고 특정 기술을 한번 배웠다고 끝나는 것이 아닌 바끼는 부분에 대해서도 꾸준히 공부해야 한다. React 같은 경우 계속해서 Version Update가 이뤄지고 새로운 내용들이 계속 추가되기 때문이다.
-> 단점 2. 높은 상태관리 복잡도
React 에서 State 란 쉽게 말해 React Component의 상태를 의미한다.
앞에서 Virtual DOM을 설명할 때 바뀐 부분만을 찾아서 Update 한다고 말을 하였는데,
여기서 바뀐 부분이라는 것은 State가 바뀐 Component를 의미한다.
따라서 성능 최적화를 위해 이 State를 잘 관리하는 것이 중요하다.
웹 사이즈의 규모가 커져 Component의 개수가 많아지면 상태 관리의 복잡도도 증가한다.
그래서 보통 큰 규모의 프로젝트의 경우 상태 관리를 위해서
리덕스, 보백스, 리코일 같은 외부 상태관리 라이브러리를 사용하는 경우가 많다.
이와 같이 방대한 학습량이 단점으로 볼 수 있다.
