리액트 시작 - 왜 리액트인가?

서론

자바 스크립트

• 자바스크립트는 한때 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 보여주기 위한 용도로 씀.
• 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 함.
• 더 나아가 서버 사이드, 모바일, 데스크 톱 애플리케이션에서도 사용함.

 

자바스크립트 기반 프레임워크

• 자바스크립트만으로 대규모 프로젝트를 진행할 수 있게 됨.
• 하지만, 순수 자바스크립트로는 어려움이 있음.
• 대규모 프로젝트를 어떻게 관리할까?
  • AngularJS, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js ...

 

• 위 프레임워크들은 아래와 같은 방법으로 구조화를 함
  • MVC: Model View Controller
  • MVVM: Model View View Model
  • MVW: Model View Whatever (AnularJS)

 

• 모두 모델(Model)과 뷰(View)를 갖는 공통점이 있음.
  • Model: 애플리케이션에서 사용하는 데이터를 관리하는 영역
  • View: 유저에게 보여지는 영역.

출처: https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC

<div if="post-1">
    <div class="title">Hello</div>
    <div class="contents">Hello World</div>
    <div class="likes">1</div>
</div>

• likes 요소 값을 2로 업데이트 한다면, post-1의 likes 요소를 찾아 내부를 수정해야함.
  • 애플리케이션 규모가 크면 상당히 복잡해질 수 있고, 성능 또한 떨어질 수 있음.

 

• 페이스북 개발팀에서 이를 해결한 방법이 있음.
  • 데이터가 변할때마다 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용.
  • 구조가 매우 간단해지고, 코드양도 줄어듦.
  • 어떻게 변화를 줄지 고민할 필요없이, 새로 렌더링하면 됨.

 

• 리액트
  • 하지만, 웹 브라우저에서 위 방식대로 하면 CPU 점유율, 메모리 사용량 등 문제가 있을 수 있음.
  • 그래서 페이스북 개발 팀은 최대한 성능을 아끼고 편안한 유저 경험(user experience)을 제공하려고 만든 것이 '리액트'

 

리액트의 이해

• 리액트: 자바스크립트 라이브러리
  • 오직 View만 신경 쓰는 라이브러리

 

• 컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체 부분
  • 템플릿과는 다른 개념
    • 템플릿은 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환
    • 컴포넌트는 조금 더 복합적인 개념으로, 재사용이 가능한 API로 수많은 기능들을 내장하고 있음.

 

• 렌더링: 사용자 화면에 뷰를 보여주는 행위
  • 어떻게 리액트는 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 유저 경험을 제공할까?
    • '초기렌더링'과 '리렌더링'

 

초기 렌더링

어떤 UI 프레임워크, 라이브러리를 사용하든, 가장 처음에는 어떻게 보일지를 정하는 '초기 렌더링'이 필요

• 리액트에서는 render 함수를 이용함

render() {...}

• 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할
• html 형식의 문자열을 반환하지 않음.
  • 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환
• 컴포넌트 내부에 또 다른 컴포넌트가 들어 갈 수 있음
  • render 함수 실행시 내부에 있는 컴포넌트들도 재귀적으로 렌더링
  • 렌더링이 끝나면 지니고 있는 정보를 이용해 HTML을 만들고, (실제 페이지의) DOM 요소 안에 주입

 

조화 과정

• 리액트에서는 뷰를 업데이트할 때 조화과정(reconciliation)을 거친다
  • "업데이트 과정을 거친다" 보단 "조화 과정을 거친다"가 더 정확한 표현

 

• 데이터에 변화가 있으면 우리가 보기엔 뷰가 변형되는것처럼 보이지만, 사실은 새로운 요소로 갈아 끼운다.
  • 이 작업 또한 render() 함수가 함

 

• 컴포넌트는 데이터를 업데이트 했을때 단순히 업데이트한 값을 수정하는 것이 아님.
• 새로운 데이터를 가지고 render 함수를 또 다시 호출함.
  • 이때, render 함수가 결과를 바로 DOM에 반영하지 않고, 이전 컴포넌트 정보와 현재 render가 만든 컴포넌트 정보를 비교.
  • 자바스크립트를 이용하여 최소한의 연산으로 비교 후, 둘의 차이를 알아내 DOM 트리를 업데이트.
  • 결국, 루트 노드부터 시작하여 전체 컴포넌트를 다시 렌더링하는 것처럼 보이지만, 사실은 최적의 자원을 사용하여 이를 수행함.
  • 더 자세한 내용은 'Virtual DOM'을 알아야 함.