[React] React의 주요 개념 및 사용 이유

이 포스팅은 Javascript 라이브러리 중 하나인 React를 공부하기에 앞서 왜 리액트를 사용하는지, 어떠한 장점들을 가지고 있는지 정리해보려고 합니다.

 

대부분의 포스팅은 React 공식문서 및 자습서를 참고할 예정이고, 차차 공부해가면서 업데이트 해 나가겠습니다 :)

 

React 란 ?

React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용되며 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다.

SPA란 ? 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하는 방식으로 구성된 단일 웹 페이지 애플리케이션

 

또한 React는 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다.

 

Vitural DOM 이란 ?

기존에는 화면의 변경사항을 DOM을 직접 조작하여 브라우저에 반영하였는데, 이는 DOM에 변화가 일어날 때마다 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어나는 불필요한 연산을 거치게 된다.

DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점을 개선하기 위해서 DOM을 직접 조작하지 않고 변경사항을 하나의 가상 돔에 모았다가 DOM에 한 번에 보내는 기술이라고 할 수 있다.

Virtual DOM을 사용하면 실제 DOM에 접근하며 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교 한뒤 최소한의 내용만 반영하여 성능 향상을 이끌어낸다.

DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경 있을 경우 해당 변경 사항만 반영하는 것이다.

👉🏻새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트

// DOM 코드

<ul class="fruits">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>​

// Virtual DOM representation(Virtual DOM식으로 표현된 코드)
{
  type: "ul",
  props: {
    "class": "fruits"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "Apple"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Orange"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Banana"
      ]
    }
  ]
}

 

React의 핵심 특징 3가지

1. 선언형(Declarative)

React makes it painless to create interactive UIs.
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다.

Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

Declarative views make your code more predictable and easier to debug.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

 

2. 컴포넌트 기반(Component-Based)

Build encapsulated components that manage their own state, then compose them to make complex UIs.
스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.

 

3. 활용성(Learn Once, Write Anywhere)

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있습니다.

React can also render on the server using Node and power mobile apps using React Native.
React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있습니다.