React란

최정환·2022년 11월 10일

목록 보기

1/7

UI 라이브러리를 사용하는 이유

리액트 등장 이전에 옛날 웹은 html을 조작하는 것은 바닐라 js나 jQuery로도 가능했었고 요즘도 정적인 웹이라면 가능하고 오히려 성능이 더 좋을 수 있다.

하지만 요즘의 웹은 복잡하며 동적으로 변하고 있다.
이것은 프로젝트의 규모도 커지고 DOM 요소들에게 많은 연산을 처리하게 하기 때문에 많은 부하가 걸릴 수 있다.
뿐만 아니라 직접적인 DOM의 관리는 유지보수를 힘들게 한다.

그리고 요즘 흔히 사용하는 SPA를 바닐라JS로 구현하기 위해서는 많은 비용이 발생한다.

따라서 우리는 더 좋은 프로젝트, 더 좋은 DX를 위해 UI 라이브러리를 사용한다.

가장 유행하는 UI라이브러리는 React, Vue, Angular가 있다.
그중에서 React는 뿌리가 가장 깊고 넓다.(파생된 라이브러리가 제일 많음)
React가 가장 인기 있는 이유가 뭘까

React에서 가장 큰 특징은 가상돔일 것이다.

가상돔은 실제 DOM과 내용을 공유하는 복사본

가상돔은 하나의 가상 레이어 가상돔에서 적용하는 변경사항은 바로 DOM에 반영되지 않는다.

변경사항들을 모아뒀다가 한번에 DOM에게 보내면 DOM은 업데이트를 한번만 하고 이러면 렌더도 한번만 하면 된다.

따라서 DOM의 조작이 빈번하게 일어난다면 가상돔은 아주 효율적인 패턴이다.
하지만 DOM을 바로 직접 조작하는 빈도가 낮다면 오히려 가상돔을 이용하는 것은 비효율적이다.

컴포넌트는 UI를 구성하는 개별적인 뷰 단위

UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 된다.
이러한 블록을 조립해 하나의 완성품을 만들면 이것이 웹에서 하나의 페이지가 된다.

컴포넌트를 분리해 사용하기 때문에 유지보수가 용이하고 만약 재활용성이 좋게 작성된 컴포넌트라면 어디서든 재활용이 가능하다.

React는 Flux 패턴을 선택해 만들어졌기 때문에 데이터가 단방향으로 흐른다.

쉽게 말하자면 데이터가 부모에서 자식으로만 전달이 가능하다.
이것은 유지보수 면에서 좋은 장점이다.

React가 가진 문법으로 JS와 HTML을 동시에 사용해 HTML에 JS의 변수를 바로 사용할 수 있게 해준다.
JSX는 JS 코드 안에서 UI 관련 작업을 할 때 시작적으로 도움이 된다.

참고