Post

프론트엔드 개발 시 알아야 할 Tradeoff에 대해 React를 위주로 알아보자

Posted Updated
By SungNam Kim 11 min read

2023년 현재 프론트엔드 개발을 위해 가장 많이 쓰이는 프레임워크 중 하나는 React입니다.

저도 프론트엔드 개발을 해오면서 대부분의 프로젝트에 React를 사용해왔습니다.

오늘은 React를 중심으로 웹 프론트엔드 개발할 때 알아야 할 Tradeoff에 대해 이야기해보겠습니다.

웹사이트는 HTML, CSS, JS의 조합으로 만들어진다.

사용자가 웹사이트를 접속하면 네트워크 통신을 통해 웹 서버에서 HTML, CSS, JS 등 여러 데이터를 전달 받고 이를 화면에 그립니다. 그리고 마우스, 키보드 등의 입력 장치를 통해 브라우저가 제공하는 여러 API 기능을 조합해 사용자는 웹 사이트와 상호작용 합니다.

이것이 웹 프론트엔드 개발의 대부분의 내용입니다.

그렇다면 HTML, CSS, JS만 사용해서 개발하지 않고 왜 React를 사용해서 개발하는지 그 이유에 대해 알아보겠습니다.

요구사항의 복잡도 증가로 서버와 클라이언트 개발을 분리하다.

1990년 최초의 웹 브라우저가 개발되고 주된 웹사이트의 형태는 문서였습니다. 인터넷의 발달과 브라우저의 발달로 점차 웹에서 할 수 있는 것들이 많아지게 되고 웹사이트는 어플리케이션의 형태로 진화하게 되었습니다.

2010년 초반, 주된 웹사이트 개발 형태는 Multi-page Application을 MVC 패턴으로 구현했습니다.

여러 페이지를 미리 준비해 놓고 URL을 기준으로 페이지를 보냅니다.

이때 MVC 패턴을 통해 조작하는데 M(Model), V(View), C(Controller)의 3개의 개념이 있습니다.

사용자는 서버에서 제공한 Controller를 통해 Model을 조작하고 View를 화면에 표시하게 됩니다. Controller의 변경 사항이 있을 때마다 웹 서버는 새로운 페이지를 보내어야만 했습니다. 사용자 입장에서는 새로 고침이 발생하는 것입니다.

요구사항의 복잡성이 증가해 서버 측 부담이 커졌고 MVC 패턴으로는 슬슬 한계가 보이기 시작했습니다.

2013년 Facebook에서 React를 오픈소스로 공개했습니다.

기존 MVC 패턴이 컨트롤러를 통해 서버에서 화면을 조작했다면 React는 Flux 패턴을 도입합니다.

클라이언트의 중앙에 store라는 개념이 화면 변화를 컨트롤하며, Virtual DOM을 이용해 새로고침 없이 변경이 필요한 부분만 자연스럽게 렌더링할 수 있게 되었습니다.

서버 위주의 Multi-page Application에서 클라이언트 위주의 Single-page Application이 된 것입니다.

React의 주요 특징들

React는 아래와 같은 주요 특징들이 있습니다.

  1. SPA(Single Page Application)
    • 한 페이지 내에서 클라이언트에서 필요할 때마다 변경 사항을 업데이트합니다.
  2. VirtualDOM
    • 성능 향상이 주목적으로 브라우저의 DOM을 통해 업데이트하기 전 js에서 React fiber라는 알고리즘을 바탕으로 필요한 부분만 업데이트를 적용하게 합니다.
  3. Declaritive
    • 선언적이라는 것은 과정을 숨기고 결과를 명시하는 것입니다. 개발자는 창의적인 부분에 집중할 수 있게 되었습니다.
  4. Component
    • 재사용이 가능한 UI 개발 단위로 Component가 있습니다. Class형태와 Function형태 두 가지가 있고 최근에는 주로 Function의 형태로 개발합니다.
  5. hooks
    • 원래 Class형태의 컴포넌트에 묶여있던 기능들이 분리되어 Function 형태 컴포넌트에서 사용할 수 있는 기능으로 React의 생명 주기 부분 부분에 연결할 수 있습니다.
  6. community
    • 2010년대 후반 React는 프론트엔드 개발자들이 가장 많이 사용하는 라이브러리가 되었고 개발자는 이 거대한 커뮤니티의 지원을 받을 수 있습니다.

React 도입 시 고려해야 할 점

  1. SPA
    • 초기 로드 시간이 서버 기반의 Multi-page Applicaiton에 비해 느릴 수 있습니다.
    • 요즘은 SEO가 중요한 시대입니다. 내 웹사이트가 검색 순위에 높게 가야 하고 URL을 통해 공유되는 링크에 특정한 정보를 담고 싶을 때 SPA에서는 특별한 방법을 적용해야 할 수 있습니다.
    • 라우팅 처리를 위해서 별도의 작업이 필요할 수 있습니다.
  2. Virtual DOM
    • DOM 업데이트의 성능을 향상해 주지만 완벽한 방법이라고 볼 수는 없습니다. 구조상 불필요한 함수 호출을 계속 해야 할 수 있고 tree를 순회하는 비용은 존재합니다.
    • 메모리를 소비하는 추가 계층이 존재하므로 복잡하고 큰 어플리케이션을 개발한다면 리소스가 제한된 장치에서 문제가 발생할 수 있습니다.
  3. Declaritive
    • 익숙해지고 배우는데 비용이 발생합니다. HTML, CSS, JS의 사용법을 모르고 React에서 개발하는 방법만 알게 될 수 있습니다.
    • 특정 이슈는 디버깅을 React에서 제공하는 도구와 개념에 의존해야 할 수 있습니다.
  4. Component
    • 개발자는 어디까지 Component로 구현해야 할지 학습이 필요할 수 있습니다. 과도한 컴포넌트화는 렌더링 이슈를 발생시킬 수 있습니다.
  5. hooks
    • useEffect는 특히 주의해서 사용해야 합니다. 예기치 못한 asynchronous side effect를 잘 테스트해야 합니다.

  6. community

    • react의 구조상 몇몇 js 라이브러리는 사용이 불가능할 수 있습니다. 이는 react에 적용할 수 있게 수정한 라이브러리를 사용하거나 직접 구현해야 할 수도 있다는 뜻입니다.
  7. Bundle Size
    • 몇몇 다른 프론트엔드 프레임워크에 비해 빌드 사이즈가 작지 않은 편입니다. 성능이 중요한 프로젝트라면 다른 선택을 고려해야 할 수 있습니다.

당신은 React가 필요하지 않을 수 있습니다.

2023년 현재 React 이외에도 다양한 프론트엔드 프레임워크들이 존재합니다.

10년 전 React만의 방법으로 웹 개발의 문제점을 풀기 위해 만든 기능들 또한 몇몇은 이미 더 나은 방법으로 개발되고 있습니다.

우리는 계속해서 React를 써야 할까요? 써야 한다면 그 이유는 무엇인가요?

결론

React를 위주로 웹 프론트엔드 개발을 간단하게 살펴보았습니다.

어떤 기술이든 완벽한 해결 방법은 찾기 어려운 것 같습니다.

개발에서 중요한 것은 요구사항을 파악하고 현재 상황을 고려해 맞는 방법을 찾는 것이라고 생각합니다.

아래 예시 내용처럼 다각도로 분석해서 적합한 프론트엔드 프레임워크를 선택해 Happy Coding하시길 바랍니다.

  • 프로젝트 요구사항
    • 주요 기능 파악
    • 확장성 여부 파악
    • 특정 라이브러리 지원 여부 확인
    • 트래픽 부하 및 성능적 측면
  • 개발팀 상황
    • Javascript, Typescript 사용
    • 프론트엔드 프레임워크 숙련도
    • 개발 팀 편의성 및 만족도
Web
react
This post is licensed under CC BY 4.0 by the author.