[React] React란 무엇인가?

인프런의 [처음 만난 리액트] 강의를 학습하면서 공부 + 정리한 내용입니다

 

React란?

React 공식 홈에서는 React를 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리라고 소개하고 있습니다.

그러면 UI와 라이브러리는 무엇일까요?

 

사용자 인터페이스(User Interface)?

먼저 사용자 인터페이스란 사용자와 컴퓨터 프로그램이 상호작용을 하기 위해 서로 입력과 출력을 제어해 주는 것을 말합니다. 쉽게 말하면 사용자가 사용하는 서비스나 제품의 화면 안에 있는 모든 것을 말합니다. 즉, 버튼이나 입력창 같은 것이죠.

https://mui.com/

 

그 다음 라이브러리는 무엇일까요?

라이브러리(Library)란?

보통 라이브러리라고 하면  도서관이라는 뜻을 가지고 있습니다. 그래서 어떤 지식을 찾고 싶을 땐 원하는 책을 찾아서 필요할 곳에 사용하죠. 이처럼 프로그래밍에서 라이브러리도 필요한 기능들이 묶여져 있는 코드의 묶음이라고 할 수 있습니다. 그래서 자주 사용되는 기능들을 묶어서 미리 만들어 놓으면 필요할 때마다 직접 호출해 사용할 수 있습니다.

 

https://react.dev/reference/react

처음에 나왔던 리액트에 대한 소개처럼 리액트도 라이브러리여서 많은 API를 제공하고 있습니다. 그래서 리액트를 사용할 때 필요한 기능이 있다면 리액트에서 제공하는 API를 사용해 개발할 수 있는 것이죠! 덕분에 필요한 것들을 직접 코딩하지 않고도 사용할 수 있어 개발 시간을 절약할 수 있습니다:)

 

 

---

리액트가 어떤 친구인지 대략적으로 알아봤으니 조금 더 자세히 알아보도록 하겠습니다.  

 

React의 장점

 

1. 빠른 업데이트 & 랜더링 속도

리액트는 빠른 업데이트를 위해 Virtual DOM(가상 돔)을 사용합니다.

 

그렇다면 DOM은 무엇일까요?

DOM은 Document Obejct Model로 문서 객체 모델이라는 뜻을 가지고 있습니다. 웹 페이지 내의 모든 콘텐츠(HTML 문서)를 객체로 나타내 주며 프로그래밍 언어와 웹 페이지를 연결해주는 연결점입니다. 쉽게 말해 웹 페이지를 이루는 태그들(html, body, h1, button..)을 javascript가 이용할 수 있도록 브라우저가 트리구조로 만든 객체 모델을 의미합니다.

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bom-dom.md

 

 

화면이 업데이트 되었다는 것은 DOM이 업데이트 되었다는 것을 의미합니다. DOM이 업데이트 하기 위해서는 업데이트 하려는 DOM을 직접 찾아 수정해야 하는데, 수정할 부분을 전체 DOM 중에서 찾아야 하기 때문에 많은 비용이 들고 성능에 크게 영향을 미칩니다. DOM을 조작할 때 메모리 측면과 속도 측면을 개선하기 위해 Virtual DOM이 등장하게 되었습니다.

 

Virtual DOM은 웹 페이지와 실제  DOM 사이의 매개체 역할을 합니다. 

https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

 

리액트에서는 상태가 바뀐 부분만을 찾아 DOM을 수정합니다.

상태가 변경되면 Virtual DOM에서 바뀐 부분을 찾습니다. 그 후 바뀐 부분만을 업데이트 하고 리랜더링을 해 실제 DOM에 반영합니다.

 

이런 과정을 통해 리액트는 보다 변경된 내용을 빠르게 보여줄 수 있습니다.

 

 

2. Component-Based

Component(컴포넌트) 는 그 뜻 그대로 하면 구성 요소라는 뜻을 가지고 있습니다. 프로그래밍에서는 재사용이 가능한 각각의 독립된 모듈을 뜻합니다. 그렇기 때문에 하나의 컴포넌트는 다른 컴포넌트들의 조합으로 만들 수 있습니다. 

 

리액트는 레고 블록 조립하듯이 이런 컴포넌트들을 모아서 개발합니다. 그래서 웹 사이트의 여러 부분에서 반복해서 사용될 수 있습니다. 즉, 하나의 컴포넌트가 재사용 될 수 있다는 것이죠.

 

3. 재사용성(Reusability)

재사용성이란 계속해서 다시 사용이 가능한 성질입니다.

재사용성이 높으면 어떤 점이 좋을까요?

 

1) 개발 기간이 단축된다.

:: 기존에 개발해 둔 것을 곧바로 재사용하면 되기 때문에 개발 기간을 줄일 수 있습니다.

 

2) 유지보수가 용이하다.

:: 공통으로 사용하는 모듈에 문제가 생기면 해당 부분만 찾아서 수정하기 되기 때문에 유지보수 하기가 좋습니다.

:: 또한 재사용성이 높다는 것은 그만큼 서로 의존성이 낮다는 것이기 때문에 각 부분들이 잘 분리되어 있어서 버그를 좀 더 쉽게 찾을 수 있습니다.

 

 

 

React의  단점

1. 방대한 학습량

기존과 다른 방식의 UI 라이브러리이기 때문에 배워야 할 내용이 많습니다. 그리고 지금도 계속해서 버전이 업데이트 되기 때문에 새로운 내용이 등장하고 있습니다. 따라서 바뀌는 부분에 대해서 계속해서 공부를 해야합니다.

 

 

2. 높은 상태 관리 복잡도

리액트에서는 state라는 것을 가지고 상태를 관리합니다. state가 바뀌게 되면 화면이 바뀌게 되죠. 그렇기 때문에 성능 최적화를 위해 state를 잘 관리하는 것이 중요합니다! 

 

하지만 웹 사이트의 규모가 커지고 컴포넌트가 많아지게 되면 상태 관리의 복잡도가 증가하게 됩니다. 이런 상태들을 잘 관리하기 위해 redux와 같은 외부 상태 관리 라이브러리를 사용하는 경우가 많습니다. 그러면 이 부분에 대한 공부를 더 해야 하기 때문에 학습량이 또 방대해 지게 됩니다.

 

 

---

참고 자료

 

• 라이브러리 vs 프레임워크

 

[개발 용어] 라이브러리 vs. 프레임워크 개념과 차이

• React에서의 가상돔 개념

React에서의 가상돔 개념