React의 장점과 단점

휘Bin·2023년 6월 29일
Reactfrontend
0
post-thumbnail

React의 장점

많은 장점을 지니고 있으니 많이들 이용하는 것이겠지만, 몇 가지로 추려보았다!

  • 단순한 앱 개발
    : React는 순수 자바스크립트로 만든 컴포넌트 기반 아키텍처이다. 선언형 스타일을 가졌으며, 강력한 개발자 친화적인 DOM 추상화를 제공한다. React Native를 사용하면 DOM뿐 아니라 안드로이드, IOS에서도 이점을 가져갈 수 있다.

  • 빠른 UI
    : 가상 DOM 채택과 DOM의 변경 사항을 비교할 때 사용하는 훌륭한 알고리즘을 뛰어난 성능을 React는 제공한다. 또한, 헤드리스 브라우저(GUI없이 실행할 수 있는 브라우저)를 사용하지 않고도 테스트를 수행할 수 있다.

  • 코드량 감소
    : React 커뮤니티와 개발 생태계를 통해 많은 라이브러리와 컴포넌트를 접할 수 있다.

간결성

간결한 것과 펼리하게 사용하는 것은 다를 수 있다. 쉬운 것이 복잡해지는 경우도 있고, 간결해도 구현이 어려울 수도 있다.
이 간결성은 KISS원칙과 밀접하게 연관되는데, 쉽게 말하면 간결한 시스템이 더 잘 작동한다는 것이다.

React는 간결성을 위해 소프트웨어 엔지니어의 웹 개발 경험을 극적으로 개선하는 방법을 택했다. 이에 대한 기능들 몇 가지를 보면 이러하다.

  • 선언형 스타일 채택
    : React는 뷰를 자동으로 갱신하는 선언형 스타일을 채택했다.

  • 순수한 자바스크립트를 이용한 컴포넌트 기반 아키텍처
    : React는 컴포넌트에 자바스크립트만 사용한다. 템플릿 엔진 같은 도메인 특정 언어를 사용하지 않는다. 또한, 한 가지 기능을 개발하기 위해 기술을 분리하지 않는다.

  • 강력한 추상화
    : React는 DOM을 쉽게 다룰 수 있고, 같은 기능이지만 크로스 부라우징을 위해 다르게 구현할 수 밖에 없었던 인터페이스나 이벤트 핸들링을 정규화 하였다.

선언형 스타일 채택

React는 명령형 대신 '선언형 스타일'을 채택했다. 개발자가 순서대로 무엇을 해야 할지 작성하는 명령형 스타일과 달리 선언형 스타일은, 실행 결과가 어떻게 되어야 할지를 코드로 작성한다. 이것이 더 나은 이유는, 선언형으로 작성하면 복잡도를 줄여줄 뿐 아니라 코드에 대한 이해도와 가독성을 높일 수 있기 때문이다.

명령형 Ex)

var arr = [1,2,3,4,5],
	arr2 = []
for(var i=0, i<arr.length, i++){
	arr2[i] = arr[i]*2
}

지금은 간단하지만, 명령문이 늘어날수록 마지막 결과가 어떻게 나올지 예측하기는 점점 힘들어질 것이다.

선언형 Ex)

var arr = [1,2,3,4,5],
	arr2 = arr.map(function(v,i){return v*2})

어떤게 더 나은지는 사람마다 다르겠지만, 훨씬 간결해진 것은 눈으로 볼 수 있다.
명령형 스타일과 달리 선언형 스타일은 결과값에 좀 더 집중한다. 지역변수도 줄어줄고 논리도 단순해진다.

React는 UI를 구성할 때 선언형 스타일로 작성한다. 개발자가 UI요소를 선언형 스타일로 작성한 후, 뷰에 변경이 발생하면 React가 알아서 갱신한다.
뷰를 갱신하는 경우가 선언형 스타일이 빛을 발하는 순간이라고 할 수 있다. 이것을 '내부 상태 변화'라고 부른다. React는 상태 변경에 따라 뷰를 갱신한다.

React는 내부적으로 가상DOM을 사용하여 브라우저에 이미 반영된 뷰와 새로운 뷰의 차이점을 찾아낸다. 이 과정을 'DOM 비교' or '상태와 뷰의 보정'이라고 한다. 따라서 명시적으로 뷰를 변경할 필요가 없다. 상태를 갱신하면 뷰는 이에 따라 자동으로 갱신되기 때문이다.

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

컴포넌트 기반 아키텍처는 React 말고도 있고, 관심사 분리, 느슨한 결합, 코드 재사용과 같은 이점이 많다. React의 컴포넌트 클래스는 컴포넌트 기반 아키텍처를 구성하는 블록이다. 여러 장점이 있지만 코드 재사용이 쉬워 코드를 줄일 수 있다는 것이 가장 대표적인 장점이다.

컴포넌트 기반 아키텍처는 있었지만, 순수한 자바스크립트로 구현한 컴포넌트 기반 아키텍처로는 React가 처음이었다.
AngularJS도훌륭한 프레임워크지만, 프레임워크가 도메인 특정 언어를 사용하면 특이한 변수나 메서드를 따로 또 배워야한다. 하지만 React는 순수 자바스크립트이므로 그렇지 않다.

React 컴포넌트는 분리와 캡슐화가 잘 이루어져 있고, 재사용할 수 있다. 또한, 도메인 특정 언어나 템플릿, 지시자 같은 기능 없이도 더 나은 관심사 분리를 보장한다.
이렇듯 학습곡선이 낮다는 것도 장점이다.

강력한 추상화

React는 강력한 문서 모델 추상화를 제공한다. 조금만 더 자세히 말하면, 내부의 인터페이스는 숨기고, 대신에 정규화 과정을 거친 합성 메서드와 속성을 제공한다. React는 터치 이벤트에 대해서도 합성 이벤트를 제공하여 모바일 기기를 대응한 웹 앱을 만들때도 유용하다.

React의 우수한 DOM 추상화를 증명하는 예 중 하나는 '서버 측 렌더링 기능'이다. 서버측 렌더링은 '검색 엔진 최적화'와 '성능 개선'에도 유용하다.

서버에서 React 컴포넌트를 렌더링하는 것은 단순히 DOM이나 HTML 문자열을 렌더링하는 것보다 선택권이 더 다양하다. 또한, DOM과 관련된 뛰어난 성능은 React를 많이들 사용하는 이유 중에 하나이다.

속도와 테스트 용이성

필요한 DOM 갱신 외에도 프레임워크에서 불필요한 갱신을 일으키는 경우가 많다. 불필요한 갱신이 발생하면 당연히 성능이 저하되고, UI가 복잡할 때는 더 저하된다. 동적인 UI가 많은 웹 페이지의 경우 사용자 입장에서 사용성이 눈에 띄게 떨어질 것이다.

하지만 React의 가상 DOM은 자바스크립트 메모리에만 존재한다. 데이터를 변경하면 먼저 가상 DOM을 비교하고, 렌더링 변경이 필요한 경우에만 실제 DOM에 렌더링한다.

즉, React는 꼭 필요한 부분만 갱신하여 내부 상태(가상 DOM)와 뷰(실제 DOM)를 같게 만든다. 당연히 요소 전체나 서버 측 렌더링처럼 전체 페이지를 다시 렌더링 하는 것에 비하면 성능이 뛰어날 것이다.

React의 강력한 개발 커뮤니티와 생태계

React는 메타의 막대한 지지를 받고 있다. 또한 수 많은 개발자들에게 인정을 받고 있다. 이는 개선 속도가 점점 빨라지그, 미래에 대한 걱정도 줄여줄 것이다.

React의 개발 커뮤니티는 정말 많다. 많은 경우에 직접 구현하느라 애쓸 필요가 없을 정도라고 한다.

몇 가지 소개하면,

React의 단점

당연히 장점만 있을 순 없다. 그리고 장점과 단점은 사람마다 다를 수 있다!

  • 모든 기능을 갖춘 프레임워크는 아니다.
    : AngularJS나 Ember 같은 기능을 사용하려면 Redux나 React Router같은 라이브러리를 함께 사용해야 한다.
  • 다른 프레임워크만큼 성숙하지는 않다.
    : JSX나 데이터 라이브러리로 사용하는 Flux는 초보자에겐 어려울 수 있다. 즉, React에 정통한 수준이 되는 자료는 부족한 편이라고 한다.
  • 단방향 데이터 바인딩만 제공한다.
    : 단방향 바인딩은 복잡한 앱에서 복잡도를 줄이는 데 도움이 된다. 하지만 양방향 바인딩에 익숙한 사람들은 코드를 더 작성해야 해서 불편하게 느낄 수 있다.
profile
휘Bin
One-step, one-step, steadily growing developer
이전 포스트

React란 무엇이고 어떤 문제들을 해결하는가

다음 포스트

웹 애플리케이션에서의 React

0개의 댓글