[React] 리액트를 선택하는 이유

 

[React란?]

React는 UI 구축을 위한 자바스크립트 라이브러리입니다. facebook에서 제공해주는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용됩니다. React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다. 컴포넌트를 레고처럼 다루어 레고를 조립하듯이 컴포넌트를 조립하여 UI를 개발하여서 유지 보수하기에 유리합니다. React를 사용하면 페이지 전체를 렌더링 하지 않고 렌더링이 필요한 부분만 렌더링 할 수 있습니다.
 
 

[React 등장 배경]

리액트의 등장 이전에도 많은 라이브러리/프레임워크가 존재했습니다. (jQuery, Vue.js, Angular.js 등) jQuery의 경우, 여러 종류의 웹브라우저들마다 JS를 불러오는 방식이 달라 어려웠던 점을 해결해주었었습니다. 브라우저들 간에 통일성을 가지도록 도와주면서 큰 인기를 끌었었습니다. 현재도 많이 쓰이고 있는 인기 있는 라이브러리이기도 합니다. 하지만, 시간이 흐르면서 web App의 크기가 커지자, JS 파일이 넘쳐나면서 통제가 어려워졌고, 이를 효율적으로 관리하기 위해 backbone.js 같은 라이브러리가 등장하면서 JS파일의 조직적 관리가 용이해졌습니다. 그러면서 HTML, CSS, JS에서 JS의 중요성이 점점 더 커지기 시작했고 SPA(Single Page Application)가 등장하게 되었습니다. SPA는 간단하게 html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 바꿔서 보여줍니다. 그래서 부드럽게 동작하는 것처럼 보이고  트래픽 총량을 줄일 뿐만아니라 웹의 사용성을 높이고 속도를 향상하는 장점이 있습니다.
 
 

[왜 React를 사용할까?]

#1. Virtual DOM의 사용

실제로 DOM을 제어하지 않고 중간에 Virtual DOM이라는 가상의 DOM을 두어 Virtual DOM이 변경될 때, 실제 DOM을 변경하도록 설계되어 있습니다. 이러한 작업을 Reconciliation이라고 합니다. Vitual DOM은 불필요한 렌더링 과정의 비효율성을 최소화하기 위해 탄생하게 되었습니다. 하지만, 이렇게 Virtual DOM을 사용한다 해서 무조건 DOM보다 좋고 빠르다는 것은 아닙니다. 
 
* Virtual DOM의 내부 작동원리
Virtual DOM의 값을 직접 변경하면 안되는데 그 이유는 간단합니다. React의 state는 불변성을 유지해야 하기 때문입니다. 컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 render() 함수를 호출하는데 state를 직접 수정하게 되면 React가 render() 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. 따라서, Virtual DOM을 갱신하는 방법은 setState() 메서드를 호출하거나 Redux의 경우 Dispatch를 하여 state가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 Virtual DOM을 갱신해야 합니다.
 

Virtual DOM은 많은 경우에 효과적이고 빠를 수 있지만, 항상 더 나은 것은 아닙니다. 다음은 Virtual DOM이 DOM보다 무조건 빠르고 좋지 않은 이유입니다.

• 오버헤드: Virtual DOM을 사용하면 DOM 조작에 대한 중간 단계가 추가됩니다. 이러한 중간 단계는 가상 트리 구조를 생성하고 비교하는 작업으로, 이로 인해 불필요한 오버헤드가 발생할 수 있습니다. 작은 규모의 애플리케이션에서는 이러한 오버헤드가 무시될 수 있지만, 대규모 애플리케이션에서는 성능 문제를 일으킬 수 있습니다.
• 메모리 사용량: Virtual DOM은 실제 DOM과 비교하기 위해 추가 메모리를 필요로 합니다. 큰 가상 트리를 유지하면 메모리 사용량이 증가할 수 있으며, 이는 모바일 기기 및 브라우저에서 성능 문제를 야기할 수 있습니다.
• 복잡성: Virtual DOM을 사용하는 것은 개발자에게 학습 곡선을 요구할 수 있습니다. 또한 Virtual DOM을 구현하려면 라이브러리 또는 프레임워크를 사용해야하므로 프로젝트에 복잡성을 도입할 수 있습니다.
• 필요하지 않은 경우: 작은 규모의 애플리케이션 또는 단순한 UI 변경만 있는 경우에는 Virtual DOM을 사용할 필요가 없을 수 있습니다. 실제 DOM 조작이 충분히 효율적일 수 있으며 Virtual DOM의 추가 복잡성은 오히려 성능을 떨어뜨릴 수 있습니다.

 

#2. 컴포넌트 단위 개발

컴포넌트는 레고 블럭과 같이 작은 단위로 개발한 것을 조립하듯이 합치는 것입니다. 이렇게 하면 컴포넌트의 가독성이 높고 간단하여 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다.
 

#3. JSX의 지원

JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element를 제공해 줍니다. 아래 코드에서 return ()에 감싸져 있는 HTML 문법과 매우 유사한 코드가 바로 JSX입니다.

const hello = () => {
    return (
        <div>
          <h1>안녕하세요.</h1>
        </div>
    );
};

 

#4. 서버 사이드 렌더링, 클라이언트 사이드 렌더링 지원 가능

[React] 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

 

#5. 다른 프레임워크와도 혼용 가능

리액트는 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 함께 사용할 수 있습니다.
 
 
 

References
https://ko.reactjs.org/
https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
[React] Virtual DOM vs DOM