요즘 기술면접을 위해 프론트엔드 개발자 코딩인터뷰 대표 질문들을 조사하고 검색하다 보니 내가 써온 기술들에 대한 고민이 별로 없었다는 걸 알게 되었습니다. React를 쓰는 이유를 단순히 커뮤니티가 제일 많아서로 퉁쳐 대답하다가 react가 나왔을 당시 개발자들, 기업들은 무슨 이유로 React로 넘어가는 선택을 하게 되었는지 문득 궁금해져서 이 글을 작성하게 되었습니다.

기업들이 선택한 이유

React를 무엇인지 알기 전에 기업들이 먼저 왜 이 라이브러리를 선택했는지 알게 되면 React가 어떤 부분에서 다른 프레임워크보다 장점이 있었는지 이해하기 쉬울 것 같아 먼저 작성하게 됐습니다. 해당 글들은 전부 Amber, Backbone, Angular가 유행하던 시절이기에 Vue.js에 관한 이야기는 언급되지 않습니다.

---

1) 리액트는 단방향 데이터 흐름이다.

우리는 React의 단방향 데이터 흐름과 UI 개발에 대한 선언적 접근 방식이 앱에 대해 더 쉽게 추론할 수 있도록 하기 때문에 React를 사용하기로 결정했습니다.
-Ian McKay(Netflix)

React의 애플리케이션 아키텍처인 Flux는 단방향 데이터 흐름에 중점을 두고 흐름에 따라 데이터 불변성을 선호합니다. 이것의 이점은 데이터가 어디에서 변경되는지 정확히 알 수 있으므로 앱을 테스트하고 유지 관리하기가 더 쉽습니다.
-rmanalang(HipChat)

React는 단방향 데이터 흐름에 따라 작동하도록 설계된 뷰 레이어입니다. one-way binding이라고도 불리는 단방향 데이터 패턴은 관심사간에 변경 가능한 참조가 없는 패턴으로 설계하는 것을 이야기합니다.

• 데이터 바인딩이란 두 데이터 혹은 두 소스파일의 데이터를 일치, 동기화시키는 작업을 얘기합니다. DB와 화면, 부모 컴포넌트와 자식 컴포넌트 등등 다양하게 일어날 수 있습니다. bind라는 것에서 서로를 묶는다고 생각하면 이해가 편할 것 같습니다.

기존 Angular.js에서는 템플릿에 변수를 정의해두기만 하면 사용자가 내용을 입력할때마다 모델에서 값이 갱신되었습니다. 그리고 반대로 모델에서 ajax 요청으로 새로운 값을 받아 변경되면 그것은 고스란히 뷰에서 적용되어 웹페이지가 갱신됩니다.
React에서는 데이터가 바뀌었어도 그것을 반영하는 코드를 매번 적지않는 한 UI는 변경이 없을 것이며 데이터를 바꿀 수도 없습니다.

이런 부분에서 단일 데이터 흐름은 유리한 점이 있습니다.

• 디버깅(데이터가 오는 곳은 한곳이기 때문)에 유리하고 시간 여행 디버깅도 가능하다.
• 코드 가독성도 좋으며 흐름을 이해하기 쉽다.

---

2) 리액트의 Virtual DOM

우리가 직면한 가장 큰 문제 중 하나는 불필요한 리플로우를 제거하는 것이었습니다. React의 가상 DOM은 DOM을 신중하고 조심스럽게 다루는 데 큰 역할을 해주었습니다.
-nathansobo(Atom)

리액트 팀은 메모리에서 DOM 요소를 생성하는 것은 빠르지만 실제 DOM으로 렌더링하는 과정에서 병목이 발생한다는 점을 알게 되었고 그 문제를 피하기위한 알고리즘을 만들어냈습니다. 가상 DOM을 생성하여 기존 DOM TREE와 비교하게 하고 DOM은 그 연산된 결과만 그대로 받아 렌더링하면 되었습니다.

---

3) 리액트는 UI를 함수로 만들었다.

한 가지 테크닉은 단일 책임 원칙입니다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙입니다. 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 합니다.

• https://ko.reactjs.org/docs/thinking-in-react.html

리액트는 자바스크립트만 알고 있으면 누구든지 접근가능하며 해당 프레임워크나 라이브러리에만 존재하는 문법이 적고 간결하다. 그리고 리액트의 UI 컴포넌트는 매우 독립적이며 특정 관심사를 집중시키며 재사용, 유지보수, 확장에도 용이했다.

선언형 스타일 채택

명령형보다 복잡성을 줄이고 가독성을 높여주었다.

자바스크립트를 이용한 컴포넌트 기반 아키텍쳐

기존 Angular 등등 템플릿을 이용하여 뷰를 보여주는 경우 새로 배워야하는 단점이 있지만 리액트에서는 자바스크립트와 마크업을 활용하여 그 수고를 줄여줬다.

/* Angular.js */
<ul class="todo-list">
  <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
    <div class="view">
      <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)">
        <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
    <button class="destroy" ng-click="removeTodo(todo)"></button>
    </div>
    <form ng-submit="saveEdits(todo, 'submit')">
        <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
    </form>
    </li>
</ul>

//React.js
const App = () => {
  const [todos, setTodos] = useState([{id: 1, todos: '코드'}])
  return (
    <ul>
      {todos.map((v,i) => {
        return <TodoItem value={v}/>
      })}
    </ul>	
  )
}

---

4) React Native

React와 함께 제공되는 혁신적인 기능은 새로운 개발자를 고용할 필요 없이 모바일 iOS 및 Android 앱을 빌드할 수 있는 기능이었습니다. React Native 로 알려진 React의 모바일 포트를 사용하면 Javascript로 모든 기능을 갖춘 완전한 기본 모바일 애플리케이션을 작성할 수 있습니다. 이를 통해 개발자는 웹 애플리케이션의 코드를 ReactJS에서 재사용하여 모바일 개발 속도를 높일 수 있습니다.

• https://railsware.com/blog/why-use-react/

결론

1. 리액트는 단방향 데이터 흐름으로 구성되어 웹 어플리케이션이 거대해질수록 디버깅과 추적이 용이하다.

2. 리액트의 Virtual DOM은 성능이 아주 좋아서 잦은 UI 렌더링에도 DOM에 부담이 가지 않는다.

3. 리액트는 템플릿이 없고 바닐라 자바스크립트와 html 마크업으로 구성되었으며 UI를 함수 단위로 추상화해 개발 경험을 높여줬다.

4. 리액트는 크로스 플랫폼에도 유리하다. React Native의 등장으로 웹에서 모바일로 전환하는 과정이 크게 줄었다.