React, 왜 사용하시나요?
제가 React를 사용한 이유로는, react의 특징이자 장점때문이라고 할 수 있습니다.
우선 리액트는 컴포넌트 기반의 화면구성으로, 페이지를 컴포넌트라는 단위로 나눌 수 있고, 독립적으로 관리할 수 있습니다.
대규모 웹 애플리케이션에서의 컴포넌트는 역할과 기능에 따라 따로 관리하기가 쉽고, 반복되는 부분을 대체할 수 있게 해주어서 코드 재사용성도 높여줄수 있습니다. 또한, 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있습니다.
또한, Virtual DOM을 활용하기때문에 빠른 렌더링이 가능하다는 점입니다.
마지막으로 리액트는 페이스북이라는 든든한 대기업이 유지보수를 계속 진행해주기 때문에 안정성이 큽니다. 어느날 갑자기 중단되거나, 사라지지 않는다는거죠. 그에따라 사용자 수도 많고, 생태계도 크기때문에 사용할 수 있는 라이브러리도 많습니다.
이러한 장점들이 리액트를 사용하는 이유입니다.
React 특징
Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다
Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있는데,
단방향 흐름을 가진다면, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있다.
Component 기반 구조
Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만드는데,
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다.
이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.
Virtual DOM
DOM은 Document Object Model의 약자로,
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
Virtual DOM은 가상의 Document Object Model을 말한다
리액트는 이벤트가 발생할 때마다 Virtual DOM을 만들고,
다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해
변경이 필요한 최소한의 변경사항만 실제 DOM에 반영한다.
보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우 이러한 방식을 통해 효율성과 속도를 개선하고, 성능을 크게 향상시킬 수 있다. 단, 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능면에서 손해를 볼 수 있다.
