오늘의 React(React란? - 1편)

글의 시작

프로젝트 & 공부하면서 "왜 나는 React를 사용할까?"라는 질문을 스스로에게 던져보았다. 나는 파도에 휩쓸려온 물고기처럼 React가 가장 인기 있는 Front-End의 라이브러리이고, 취업하려면 알아야 한다는 이유 때문이었다. 근데 과연 이렇게 사용의 목적도 모르고 수동적인 자세를 취하는 것이 옳지 않다는 판단을 내리게 됐다. 그래서 오늘부터 React에 대해서 파고드는 시간을 가져보고 싶다. 이 과정을 통해서 내가 당연하게 생각했던 것들에 대해서 의미와 목적을 고민해 보는 시간을 통해서 깊이가 더해지고 시야가 넓어졌으면 좋겠다. 

 

 

React란?

React 공식 로고

 

리액트는 자바스크립트 프레임워크인 Angular, Vue와 달리 프레임워크가 아닌 라이브러리이다. React 공식 홈페이지에 React란 "UI(사용자 인터페이스)를 만들기 위한 JavaScript 라이브러리"라고 명시하고 있다. 

프레임워크는 웹 개발의 필요할 때 모든 기능과 툴을 다 제공해 줘서 틀 안에서 사용해야 하는 반면에 라이브러리는 내가 쓰고 싶은 것들을 갖다 쓸 수 있다. 

예를 들어, 난 이렇게 비유하고 싶다. 우리가 책을 읽고 싶다면 도서관과 서점을 두고 고민한다. 도서관에는 내가 읽고 싶다면 대여권을 통해서 일정기간 동안 대여하고 반납 해야한다. 반면에 서점은 대여권 필요없이 내가 원하는 도서를 구매해서 소장까지 가능하다. 

 

React의 특징

그럼 이제는, React가 왜 이렇게 많이 사용되고, 오랫동안 사랑받는지를 특징을 통해서 알아보고자 한다. 

대표적인 특징을 살펴본 후에, 자세한 내용은 앞으로 계속 포스팅을 통해서 정리해 나갈 예정이다. 

 

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 

 

Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터 흐름을 추적하기가 어렵고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 Flux패턴(단방향 흐름)을 가지도록 했다.

 

Flux패턴이란?(지난 글)

Flux 패턴

 

2. Virtual DOM

먼저, DOM은 Document Object Model의 약자다. 

DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다. 

 

Virtual DOM은 이벤트가 발생할 때마다 만들고, 다시 그릴 때마다 이전 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다. 

 

 

3. Component 기반 구조

React는 UI를 여러 Component를 쪼개서 만든다. 

한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

 

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽고, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.

컴포넌트만 import해서 사용할 수 있으며, 애플리케이션이 복잡해져도 코드의 유지 보수, 관리가 용이해진다. 

 

 

글의 마무리

오늘 포스팅한 내용은 React를 더 세심하게 들여다보기 위한 과정의 첫걸음이다. 내가 그동안 작성한 글들을 돌아보면 나의 생각보다는 단순히 내용 전달의 목적으로 쓴 거 같다. 

그래서 이제는 나의 생각을 곁들어서 글을 통해 나의 생각을 확장해 나가는 작업을 해볼 예정이다.