[React] React 학습 (1) - React란?

리액트란

리액트란 사용자 인터페이스를 만들기 위한 라이브러리(자주사용되는 기능들을 모아놓은것)이다.

---

라이브러리 VS 프레임워크

리액트를 설명하기 앞서 프레임워크와 라이브러리의 차이를 간단히 알아보자면

 

프로그램의 흐름에 대한 제어 권한 차이다

 

쉽게말해 프레임워크는 제어 권한이 개발자가 아닌 프레임워크가 가지고 있는 반면,

 

라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 사용하는 형태기 때문에 자유로울 수 있다고 얘기 할수있다.

---

리액트의 장점

DOM

장점을 설명하기 앞서 DOM 대해 간단히 설명해보자면

 

Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체다.

 

쉽게 말해 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇이라고 보면 된다.

---

Virtual DOM

그렇다면 Virtual DOM 무엇인가

 

실제 DOM이 아닌 말그대로 가상 DOM이다

 

Virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 한다고 보면 된다.

 

리액트가 Virtual DOM을 사용하는 이유는 빠른 업데이트 때문이라고 볼 수 있다.

 

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

 

화면이 업데이트된다 == DOM이 수정된다 라고 생각하면 된다.

 

기존에 방식으로 화면을 업데이트하려면 DOM을 직접 수정해야하는데 

이것은 성능에 영향을 크게 미치고 비용도 굉장히 많은 작업이다.

왜냐하면 수정할 부분을 DOM의 데이터에서 모두 찾아야 하기 때문이다.

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

상태의 변경, 스테이트 체인지가 일어나면 DOM에서는 업데이트해야할 최소한의 부분을 검색, 컴퓨트 diff 한다.

그리고 검색된 부분만을  업데이트하고 다시 렌더링하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있다.

---

컴포넌트 기반의 구조

 

컴포넌트란 구성 요소라는 뜻을 가지고 있는데, 

리액트에서는 모든 페이지가 컴포넌트로 구성되어있고,

하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다. 

 

예를 들면 작은 레고 블록을 조립하듯 컴포넌트들을 모아서 개발한다.

---

컴포넌트 기반의 구조의 장점

재사용성

 

재사용성은 객체지향 프로그래밍을 배울 때 등장하는 개념인데,
소프트웨어 개발에 있어서 굉장히 중요한 개념이다.

말그대로 다시 사용이 가능한 성질을 의미한다.

모든 소프트웨어가 곧바로 어떤 곳에서든 재사용이 가능하지는 않다

예를 들어 A라는 프로그램에서 쓰던 캘린더라는 모듈을 B라는 프로그램에서 사용하려 하는데 DATE 라는 모듈에 의존성이 있어 DATE 모듈없이는 독립적으로 재사용이 불가능 하다.

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

그래서 소프트웨어를 개발할때 재사용성이 높게 개발해야 한다고 하는데 이 말은 해당 소프트웨어 또는 모듈이 다른 곳에서도 쉽게 곧바로 쓸 수 있도록 개발하는 것을 의미한다.

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

그렇다면 재사용성이 높아지면 어떤 장점이 있는지 보자.

먼저 전체 소프트웨어의 개발 기간이 단축된다.

비슷한 소프트웨어를 개발한다고 할 때 기존에 개발해 둔 모듈을 곧바로 재사용하여 개발하면 되기 때문에 개발 기간을 굉장히 많이 줄일 수 있다.

두번째 장점은 유지 보수가 용이하다는 것이다.

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

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

왜냐하면 재사용성이 높다는 것은 결국 여러 모듈 간의 의존성이 낮다는 뜻이기 때문이다.

그래서 각 부분들이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있다.

이외에도 재사용성의 장점은 굉장히 많다.

그렇다면 리액트와 재사용성은 어떤 연관이 있을까?

앞에서 설명한 것처럼 리액트는 컴포넌트 기반의 구조로 되어있다.

이러한 각 컴포넌트들은 웹의 여러 곳에서 반복적으로 사용될 수 있다.

이 말은 곧 하나의 컴포넌트가 계속해서 재사용될 수 있다는 말이다.

그래서 리액트 컴포넌트를 개발할 때 항상 쉽고 재사용 가능한 형태로 개발하는 것이 중요하다.

그렇게 하면 나중에 다른 웹들도 쉽고 빠르게 개발이 가능하기 때문이다.

---

개발 생태계

리액트의 가장 큰 장점이자 현재의 영향력을 가지게 된 이유로 개발 생태계와 커뮤니티를 꼽을 수 있다.

 

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

 

이런 경우 답을 찾기 위해 여러가지 방법을 시도해보게 되는데 개발 생태계와 커뮤니티가 잘 갖추어져 있지 않으면 원하는 답을 얻기가 많이 힘들다.

그런 점에서 활발한 지식공유와 활성화된 커뮤니티는 리액트의 굉장히 큰 장점이자 중요한 부분이다.

리액트의 또 하나의 장점으로는 리액트 네이티브라는 모바일 환경 ui 프레임워크를 사용해서 모바일 앱도 개발할 수 있다는 것이다.

보통 모바일 앱을 개발하기 위해서는 안드로이드 앱의 경우 kotlin 이라는 프로그래밍 언어를 배워야하고, ios앱은 swift라는 별도의 프로그래밍 언어를 배워야 한다.

 

프로그래밍 언어뿐 아니라 각각의 프레임워크에 대해서도 학습을 해야하기때문에 진입 장벽이 높게 느껴질 수 있다.

 

하지만 리액트 네이티브를 사용하면 자바스크립트로 한번 코딩을 해서 안드로이드 앱과 ios 앱을 동시에 만들 수 있다.

물론 네이티브 앱보다 성능이나 속도 면에서 조금 부족한 부분을 보일 수 있지만 간단한 수준의 앱은 사용자가 차이점을 느끼지 못할 정도로 개발할 수 있다.


리액트의 장점을 알아봤으니 단점도 알아보자

---

리액트의 단점

첫번째 단점은 방대한 학습량이다.

모든 라이브러리가 그렇지만 특히 React의 경우 기존과 다른 방식의 UI 라이브러리이기 때문에 배워야 할 것이 많다.

virtual DOM, jsx, component, state, props 등 새로운 개념들이 많다.

또한 특정 기술을 한번 배웠다고 끝나는 것이 아닌 바뀌는 부분에 대해서도 꾸준히 학습해야한다.

계속해서 버전 업데이트가 이뤄지고 새로운 내용들이 계속해서 등장한다 새로운 버전이 나오면 이에 대한 내용을 학습하고 이해하고 있어야 실제 업무에서 원할하게 개발을 할 수 있다

새로운 것들을 공부하는 것이 귀찮게 느껴질 수도 있지만 이런게 개발자의 숙명이라고 생각한다 그리고 이런 과정을 즐길 수 있는 사람만이 좋은 개발자로 오랫동한 살아남을 수 있다.

리액트의 또다른 단점으로는 높은 상태관리 복잡도를 들 수 있다.

리액트에는 state라는 굉장히 중요한 개념이 있다.

state는 쉽게 말해 리액트 컴포넌트의 상태를 의미한다.

앞서 얘기했던 Virtual DOM을 설명할 때 바뀐 부분만을 찾아서 업데이트 한다고 얘기했었다.

여기서 바뀐 부분이라는 것은 state가 바뀐 컴포넌트를 의미한다.

따라서 state는 리액트에서 굉장히 중요한 역할을 담당하고 있다고 할 수 있다.

성능 최적화를 위해 이 state를 잘 관리하는 것이 중요한데 처음엔 생각만큼 쉽지 않을 수 있다.

익숙해지더라도 웹사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태관리의 복잡도도 증가한다.

그래서 보통 큰 규모의 프로젝트의 경우 상태 관리를 위해서 Redux, MobX 그리고 Recoil 같은 외부 상태관리 라이브러리를 사용하는 경우가 많다.

---

마치며

리액트의 정의를 알아보면서 기본적으로 Vue와 비교 할수 밖에 없었다.

 

얕게 알아보았지만 가장 큰 차이는 프레임워크와 라이브러리의 차이인거 같다.

 

Vue는 커스텀이 쉽지 않아 사용하면서도 조금 불편한 점이 있었다.

 

예를들면 Options API 를 사용하면서 정해진 규칙이나 틀에 박혀있는 느낌을 많이 받았었는데

Vue3가 나오면서  Composition API를 사용하면서 그 단점이 많이 보완되었다고 느꼈다.

 

또한 이러한 변경점이 리액트에서 영향을 받지 않았을까하는 생각을 한다.

 

예전에 리액트를 찍어먹어 봤지만 이번엔 깊숙히 학습하여 볼 예정이다.