React란?

igNite·2022년 1월 6일

React

목록 보기

1/4

Intro

개발을 조금이라도 공부하셨다면 React라는 javascript 오픈 소스 라이브러리에 대해 한번쯤은 들어보셨을 것입니다.

기존 프론트엔드에서는 라이브러리의 도움 없이, 단순히 정적 페이지를 만드는 것이라면 HTML과 CSS를 통해 모든걸 해결할 수 있었습니다. 거기에 자바스크립트를 더해주면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수 있었죠.

어떠한 유저 인터페이스를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리해줘야합니다. 그래서 만들어진 것이 바로 DOM(Document Object Model).

DOM이란?

DOM을 간단히 정의하면, 프로그래머 관점에서 바라 본 HTML 입니다.
DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드할 수 있습니다. 또한 DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. 그래서 HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있죠.

하지만?

하지만, 점점 커지는 프론트엔드 프로젝트의 규모와 복잡해지는 user interface와 interaction들, 그리고 많아지는 DOM 요소들을 직접 관리하고 코드를 정리하는 것은 여간 힘든 일이 아니었습니다. 그래서 번거로운 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기 위해 Angular, Ember, Backbone, Vue 등 정말 여러 라이브러리들 혹은 프레임워크들이 만들었죠.

Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크는 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보여지게 되는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러 (Controller) 로 이뤄진 MVC 패턴, 그리고 MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이루어진 존재였습니다.

너무 복잡하다. 그냥 Mutation 을 하지 말자. 그 대신에, 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들어버리면 어떨까?

하지만 이게 복잡하다고 생각한 Facebook는, 오직 사용자에게 view를 어떻게 하면 더 효율적으로 보여줄 수 있을지에서 시작한 라이브러리 를 만들게 됩니다.

React가 특별한 이유?

Facebook은 이 view를 날려버리고 새로 만드는 아이디어를 통해 가상의 DOM, Virtual DOM 을 구상하게 됩니다. 변화가 일어나면, 실제로 브라우저의 DOM 에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이죠. 자연스럽게 DOM 변화가 최소화되었을 것이고, 이는 성능적으로 매우 큰 발전을 이끌어낼 수 있었습니다.

그럼 React를 대표하는 가장 큰 특징들을 살펴보죠.

선언형

React는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적지 않습니다.
하나의 파일에 명시적으로 작성할 수 있게, JSX를 활용한 선언형 프로그래밍을 지향하죠.

React를 계속 배우게 된다면 그 안에서 View를 어떻게 최적화 하고 디버깅 하는지 알아야 하겠지만, 대부분 React에서는 자동적으로 필요한 부분만 업데이트 하도록 최적화를 해 줍니다. 이 JSX를 렌더링해! 라는 선언을 하면 나머지 로직은 React에 맡기면 됩니다.

컴포넌트 기반

React는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 Component를 기반으로 개발을 진행합니다.

웹을 개발할 때 버튼, 사이드바 메뉴 같은 것들을 만들게 될텐데, React를 통해 개발하게 된다면 이 부분들을 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 그렇기 때문에 리액트를 개발하다가 특정 부분에서 오류가 생겼다고 한다면, 그 컴포넌트만 수정하면 됩니다. 이 컴포넌트들은 독립적이고 재사용 가능하기 때문에 코드를 간결하게 만들고, 기능 자체에 집중할 수 있죠.

범용성

React가 매력적인 가장 큰 이유라고 할 수 있습니다. React는 Javascript 프로젝트 어디에서든 유연하게 적용될 수 있습니다. App시장에서 현재 상당한 위치를 차지하고 있는 React Native 또한 컴포넌트의 생성 방식과 구조가 React와 동일해서, React Native에서 제공하는 자체적인 태그만 배우면 사용할 수 있습니다. 그렇기 때문에 현재 프론트엔드 프레임워크와 많은 라이브러리가 넘치는 지금 현재 시장에서 강력한 선택이 될 수 있습니다.