Why React?

shorecrab·2022년 6월 7일
1

왜 리액트를 쓰는가?

React는 javascript 라이브러리로 2014년 첫 등장 이후로 지금까지 엄청나게 많은 사랑을 받아오고 있다. 이런 이유로 많은 사람들이 React를 통해 웹을 접하는 경우가 늘어나는 것 같다. 하지만 왜 React를 사용하냐고 물었을 때 대답하는 것은 쉽지 않은 일이다. 나 역시 React를 사용하면서 왜 이것을 사용하는지에 대해서는 깊게 생각해보지 않은 것 같다. 그래서 React를 사용하는 이유에 대해서 간략히 글을 쓰려고 한다.

선언적이다

사용자는 "어떤" 컴포넌트를 렌더링 할지만 정하면 "어떻게" 렌더링할 지에 대해서는 생각할 필요가 없다.
아래 React 코드를 보자.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

우리는 Example 컴포넌트를 생성했다. 그런데 이걸 어떻게 화면에 보여줘야 할지에 대한 코드는 전혀 작성하지 않았다. React가 Virtual DOM을 조작하고 실제 DOM을 update해서 렌더링하는 과정의 코드는 전혀 알지 못해도 우리는 이 컴포넌트가 렌더링 될 것이라는 것을 알고 있다.

즉, 어떻게 렌더링할 것인지에 대한 코드를 작성하지 않기 때문에 버그를 줄일 수 있다는 장점이 있다. 물론 React 개발자들이 "어떻게"에 대한 코드를 작성해야 하지만, 적어도 React 개발자들이 우리보다 뛰어나기 때문에 렌더링 과정에서의 버그를 우리보다 더 잘 고칠 수 있을 것이다.

Virtual-DOM 사용

Virtual DOM에 대한 자세한 설명은 생략하고, 여기서는 이것이 왜 장점이 될 수 있는지만 말하겠다. 혹자는 성능적인 측면에서 이득이 된다고 말하는 경우도 있는데, 반은 맞고 반은 틀린 이야기이다.

Svelte는 real DOM을 조작하면서 더 나은 성능을 보여주는 경우가 있다고 한다. 간단히 생각해봐도 Virtual DOM을 업데이트하고 Real DOM까지 업데이트 해야하기 때문에 Virtual DOM update는 잘못 사용했을 때 불필요한 오버헤드가 될 수 있을 것이다.

그럼에도 불구하고 React의 Virtual DOM은 우리가 하나하나 Real DOM으로 렌더링을 신경써가면서 개발하는 것보다는 훨씬 더 빠르고 안정적일 수 있다. Virtual DOM을 통해서 React는 렌더링에 대한 완전한 통제를 할 수 있다. (그래서 사용자는 shouldComponentUpdate 생명주기 함수 또는 useLayoutEffect 훅을 통해서 컴포넌트를 렌더링할 것인지 결정할 수 있는 것이다.)

이 과정에서 상태 변화에 대한 batching을 할 수 있게 된다. 즉, 렌더링 횟수를 줄이는 것을 통해서 Virtual DOM이 가져다 주는 이득이 오버헤드를 아득히 뛰어넘게 되는 것이다.


Context API를 통한 단방향 데이터 바인딩

Context API를 통해서 상태를 변화시킬 경우에 뷰 → 액션 → 리듀서 → 모델 순서로 순환적으로 상태가 전달되게 된다. 즉, 데이터의 흐름이 하나로 제한되기 때문에 상태 변화와 이에 따른 뷰의 변화가 예측 가능해진다. Context API 뿐만 아니라, 전역 상태관리 라이브러리(Redux, Recoil 등)을 사용할 때도 마찬가지이다.


컴포넌트 단위 재사용 용이

React 공식문서에서 컴포넌트라는 말이 나올정도로 React는 컴포넌트 단위 재사용에 진심이다.

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

위 코드에서 Welcome이라는 컴포넌트를 여러번 사용하는 모습을 볼 수 있다.
다들 React에서 컴포넌트 재사용을 너무 많이 사용해봐서 당연한 것이라고 생각할 것 같다.

profile
주니어 프론트엔드 개발자!

0개의 댓글