React란

🤔 React란 무엇인가?

페이스북에서 제공해주는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다.

웹 페이지를 만들기에는 html, css로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기때문에 리액트를 사용!!

React 공식 홈페이지, 위키백과 - React

🥸 그럼 왜 React를 사용하지?

🛠 Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 된다. 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해준다. 가령, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다.

이러한 특징은 생산성과 유지 보수를 용이하게 한다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업에 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있게 된다.

🛠 JSX

JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 준다. 장점은 매우 다양함!! 단순히 개발자가 마크업 코드에 익숙하다면, 그것만으로도 JSX를 통해 컴포넌트를 구성하는 데 쉽게 적응할 수 있다는 장점이다.

🛠 Virtual DOM

유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 원리에 의해 랜더링 과정을 반복하게 된다. Vitual DOM은 이러한 과정에 의해 발생하는 비효율성을 최소화하기 위해 탄생하게 되었다.

Virtual DOM의 개념이 기존에 아예 없던 것은 아니다. 또한, Virtual DOM 개념을 적용한 유일한 프론트앤드 라이브러리 / 프레임워크는 아니다. 하지만, 리액트는 성공적으로 Virtual DOM 개념을 적용한 선발 주자라고 할 수 있다.

⚙ Virtual DOM의 작동 원리

유저 인터랙션에 의해 View에 변화가 발생하여 10개의 노드를 수정해 주어야 한다면, 10번의 레이아웃 재계산, 10번의 리랜더링이 필요하다는 것

Virtual DOM은 변화가 발생하면, 실제 DOM에 적용되기 전에 Virtual DOM에 우선 적용을 시켜, 실제 DOM에 바로 적용하나, Virtual DOM에 적용하나 같은 연산 비용이 필요할 거라 생각하실 수 있지만, Vitual DOM은 랜더링 과정이 필요 없기 때문에 연산 비용이 실제 DOM보다 적다.

Virtual DOM에서 이러한 연산이 끝나고 나면, 최종적인 변화를 실제 DOM에 전달해준다. 즉, 10번의 작업을 하나로 묶어 딱 한 번 전달해 준다. 물론, 레이아웃 계산과 리랜더링하는 과정의 규모는 커지겠지만, 횟수를 줄이는 것으로 충분히 연산 비용을 적게 만들어 준다.

또한, Virtual DOM은 어떤 게 바뀌었는지, 어떤 게 바뀌지 않았는지 자동으로 파악하여 필요한 DOM 트리만 업데이트할 수 있게 해준다.

🎉 마무리

React는 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있으며, Component 단위 작성을 통해 생산성과 유지보수에 용이하다.