React의 장점과 특징

하솔리나·2024년 4월 15일

React

목록 보기
7/7

React - 빠른 개발 속도, 높은 성능, 그리고 뛰어난 사용자 경험

React는 현대 웹 개발의 핵심 기술로 자리 잡은 이후, 프론트엔드 개발의 판도를 완전히 바꿔 놓았습니다. JavaScript 라이브러리인 React는 SPA(단일 페이지 애플리케이션) 개발에 필수적인 도구로 자리 잡았습니다. React의 등장은 개발자들에게 사용자 인터페이스(UI) 구축의 새로운 방법론을 제시했으며, 그것은 곧 빠른 개발 속도, 높은 성능, 그리고 뛰어난 사용자 경험으로 이어졌습니다. 이 글에서는 React의 핵심 장점과 특징을 통해, 왜 많은 개발자와 기업들이 React를 선택하는지에 대해 알아보겠습니다.

1. Virtual DOM으로 향상된 성능

  • React는 가상 DOM을 사용하는 가장 대표적인 예시 중 하나입니다. React는 컴포넌트의 상태가 변경될 때 가상 DOM에 먼저 이러한 변경 사항을 반영합니다.

  • 가상 DOM은 실제 DOM의 경량화 된 복사본으로, 실제 DOM에 직접적인 변화를 주기 전에 변경 사항을 먼저 가상 DOM에 적용함으로써, 필요한 최소한의 변경만 실제 DOM에 반영하는 방식으로 동작합니다.

  • 가상 DOM을 사용하면 대규모 업데이트가 필요한 복잡한 애플리케이션에서도 리소스 사용을 최적화하고, 애플리케이션의 반응 속도를 크게 개선하며, 높은 성능을 유지할 수 있습니다.

    가상DOM 동작 방식

    이미지 출처 : https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/

    1️⃣ 초기 렌더링
    애플리케이션이 처음 로드될 때, 모든 컴포넌트가 가상 DOM에 렌더링 됩니다. 이후, 가상 DOM을 기반으로 실제 DOM이 생성되어 UI가 사용자에게 표시됩니다.

    2️⃣ 상태 변화
    사용자 상호작용이나 데이터 업데이트 등으로 컴포넌트의 상태가 변하면, 해당 컴포넌트는 가상 DOM에 다시 렌더링 됩니다.

    3️⃣ 가상 DOM 비교
    새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 식별합니다.
    4️⃣ 변경 사항 반영
    식별된 변경 사항을 실제 DOM에 반영합니다. 이 과정에서 전체 DOM을 다시 그리는 대신, 변경된 부분만 업데이트하여 성능을 최적화합니다.

    5️⃣ UI 업데이트
    실제 DOM이 업데이트되면, 화면에 보이는 UI도 변경 사항을 반영하여 업데이트됩니다.

2. SPA을 통한 강력한 사용자 경험(UX) 제공

React의 역사 그리고 SPA의 탄생

React는 2013년 페이스북 즉, 현재 Meta에서 처음 개발되었습니다.

그 전까지 Meta는 전통적인 MPA(다중 페이지 웹 애플리케이션)를 사용하여 웹 페이지를 구축했습니다. 이는 새로운 페이지로 이동할 때마다 서버에서 새로운 HTML을 매번 가져와야 했고, 전체 페이지를 다시 로드해야 했습니다. Naver D2에 게재된 글에 따르면 2012년, 페이스북은 하루 평균 25억 개의 콘텐츠를 공유하고 500TB 이상의 데이터를 처리했다고 합니다. 이처럼 처리할 데이터가 늘어남에 따라 전통적인 웹 페이지 로드 방식은 사용자 경험(UX)과 대규모 애플리케이션의 규모와 복잡성을 다루기에 어려움이 있었습니다.

2012년 2월 말 페이스북 타임라인 - 스타벅스 브랜드페이지

2012년 2월 말 페이스북 타임라인 - 스타벅스 브랜드페이지

React의 등장은 앞서 말한 문제에 대한 해결책으로 작용했습니다. React는 UI를 구성하는 컴포넌트 기반의 라이브러리로, UI 일부를 변경할 때 전체 페이지를 다시 로드하지 않고도 업데이트할 수 있게 해주었습니다. 이러한 접근 방식은 SPA의 핵심 개념과 들어맞으며, 사용자 경험(UX)이 크게 향상했습니다.
Meta는 React를 자사의 제품에 적용하면서 SPA의 장점을 경험했습니다. 여러 페이지 간의 내비게이션을 더욱 부드럽게 만들고, 사용자가 매끄럽게 상호작용할 수 있도록 한 것 입니다. 이후 다른 기업들도 React를 도입하여 SPA를 개발하는데 활용하였고, SPA의 인기는 계속해서 증가했습니다.

요약하면, Meta의 React 개발과정은 SPA의 등장과 성장과정에 밀접한 관련이 있습니다. React는 SPA를 구현하는 데 필수적인 요소로 작용하며, 이를 통해 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 기여하고 있습니다.

SPA(Single Page Application)란?

SPA는 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식을 의미합니다. 사용자가 애플리케이션과 상호작용할 때마다 서버에게 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있습니다.

SPA 대표적 적용 사례

👉🏻 *사이트명을 클릭하여 SPA 적용 사이트를 확인해보세요!

  1. Gmail

    Google의 Gmail은 SPA의 초기 적용 사례 중 하나로, 페이지를 새로고침 하지 않고도 이메일을 읽고, 검색하고, 작성할 수 있는 기능을 제공하여 사용자 경험을 대폭 향상시켰습니다.

  2. Facebook

Facebook의 뉴스 피드 페이지는 SPA 방식을 사용하여 구현되었습니다. 사용자가 뉴스 피드를 스크롤할 때, 추가 콘텐츠가 동적으로 로딩 되어 표시됩니다. 이는 페이지 전체를 새로고침할 필요 없이 지속적으로 콘텐츠를 탐색할 수 있게 해줍니다.

  1. Google Maps

    Google Maps는 사용자가 지도를 탐색하고, 장소를 검색하며, 경로를 계획할 수 있게 해주는 복잡한 SPA입니다. 사용자가 지도의 다른 부분으로 이동하거나 확대/축소할 때, 페이지를 새로고침 하지 않고도 새로운 데이터가 동적으로 로딩 되어 표시됩니다.

  2. Airbnb

Airbnb의 웹사이트는 숙소 검색 결과를 표시하고, 필터링 하며, 예약하는 과정을 부드럽게 만들기 위해 SPA 기술을 사용합니다. 사용자는 숙소를 검색하고 예약 프로세스를 진행하는 동안 페이지 전환 없이 모든 작업을 할 수 있습니다.


SPA 사용이 주는 이점

1️⃣ 빠른 사용자 경험

SPA는 초기 로딩 후에는 페이지를 다시 로드할 필요가 없으므로 사용자 경험이 더 빠르고 반응성이 뛰어납니다.

2️⃣ 서버 부담 감소

SPA는 필요한 데이터만 요청하고 업데이트하므로 서버 부하가 줄어듭니다. 전체 페이지를 새로 로드 할 필요가 없으므로 서버에 대한 요청이 줄어듭니다.

3️⃣ 뛰어난 사용자 경험

페이지 간 전환 없이 사용자 인터랙션을 지원 하므로, 애플리케이션의 사용자 경험이 향상됩니다. 사용자는 자연스럽게 앱을 탐색하고 필요한 데이터를 받아오며, 이로 인해 사용자들의 만족도가 높아집니다.


React로 SPA 구현하기

React는 보통 배포 시에 모든 JavaScript와 CSS를 번들링하여 단일 HTML 파일에 포함하는데, 이를 통해 사용자가 앱을 로드할 때 한 번의 요청으로 필요한 모든 자원을 다운로드할 수 있게 됩니다.

출처: https://yamoo9.github.io/react-master/lecture/rr-spa.html
  • React SPA 구현을 돕는 라이브러리로는 React Router가 있습니다. 자세한 내용은 React Router 공식 페이지를 확인하기를 권장합니다.

3. 생산성과 유지보수성을 높이는 컴포넌트 기반 라이브러리

  • 컴포넌트(Component)란 독립적이고 재사용 가능한 독립된 단위를 의미합니다. 위 이미지와 같이 각각 독립된 컴포넌트들을 조합하여 페이지를 구성합니다.
  • 컴포넌트 기반 개발은 코드를 작성할 때 같은 컴포넌트를 여러 번 사용할 수 있으므로 생산성을 높여줍니다. 또한, 코드를 모듈화하고 각각의 기능을 분리함으로써 개발과 유지보수를 쉽게 만듭니다.

React 함수형 컴포넌트 예시

//함수형 컴포넌트

import React from 'react';

function Hi(props) {
  return <h1>Hello, {props.name}</h1>;
} // ➡️ 함수형 컴포넌트 

export default MyComponent; 
// ⬆️ 다른 파일에서 불러올 수 있도록 내보내기
  • 위 코드는 함수형 컴포넌트 예시 코드입니다.
  • 컴포넌트를 정의하는 방법은 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.
  • 현재 React 공식 문서에서는 함수형 컴포넌트 사용을 권장하고 있습니다. 클래스형 컴포넌트보다 선언이 편리하며, 메모리 자원을 적게 사용하고도 구현할 수 있기 때문입니다.

참고 자료

profile
하솔리나
이전 포스트

리액트(React) 사용하는 이유는?

0개의 댓글