React를 사용하는 이유

이 글을 쓰는 이유는 그동안 React를 당연하게 공부하고 당연하게 사용해 왔기 때문이다. 그러다 보니 React를 왜 배웠는지 왜 프로젝트에 사용하게 되었는지에 대한 질문을 받으면 어떤 이유를 설명해야 할지, 무슨 이유가 특별히 더 중요한지에 대해 고민이 앞서 스스로 명쾌한 대답을 하지 못하는 것 같다는 생각이 들었다. 그래서 오늘은 스스로에게 질문한 내용을 글로 남기려고 한다.

React 란

리액트는 사용자 인터페이스(UI)를 담당하는 자바스크립트 기반 라이브러리로, 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. 

SPA
하나의 페이지로 만들어진 웹 애플리케이션을 의미한다. 페이지 이동 시 추가적인 서버의 접속 없이 필요한 데이터만 자바스크립트 안에서 동적으로 로드하여 화면을 변경한다. 

React를 배운 이유

다음과 같은 이유 때문에 다른 라이브러리, 프레임워크가 아닌 리액트를 배우게 되었다.

1. 리액트는 많은 개발자들이 사용하고 관심을 가지는 라이브러리이다. 

➡️ 리액트는 오픈 소스로 이미 유명한 회사들이 사용하고 있다. 즉, 리액트를 사용하는 기업이 많을수록, 오픈 소스에 기여하는 커뮤니티가 많을수록 리액트가 오래 사용되고 발전될 수 있다.

➡️ 그만큼 커뮤니티와 생태계가 크기 때문에 기술적으로 많은 리소스를 얻을 수 있고, 새로운 기술을 시도하거나 기술 적용에 어려운 부분이 있을 때 관련 정보를 얻는데 용이하다.

2. 리액트를 사용하여 SPA를 구축했을 때 여러 가지 장점을 가진다.

➡️ SPA를 구축하기 위한 다른 프레임워크(Angular, Vue)가 있지만 리액트는 가상돔이라는 개념을 도입하여 애플리케이션의 성능 개선으로 주목을 받게 된다. 또한, 리액트는 '라이브러리'인 만큼 다른 프레임워크보다 처음 배우고 사용하기가 용이하다.

React를 사용했을 때 특징

리액트를 사용했을 때 특징과 장점이 될 부분을 알아보면 다음과 같다.

1. 가상 돔(Virtual DOM) 사용

SPA에서 사용자와 인터랙션 할 경우가 많을 때 리플로우와 리페인트가 빈번하게 발생하게 되면 애플리케이션의 성능이 떨어질 수밖에 없다. 그래서 리액트에서 도입한 개념이 가상 돔이다. Virtual DOM은 돔 트리와 동일한 돔 트리를 메모리상에 만들어 놓는다. 그리고 변경사항이 발생하면 DOM을 직접 조작하지 않고, 변경사항을 가상 돔에 모았다가 실제 DOM에 적용하는 방식으로 리렌더링을 최소화하여 성능을 향상시킬 수 있다.

2. 컴포넌트 기반

리액트는 기본적인 구성을 컴포넌트 단위로 하고 있다. 컴포넌트를 제작하고, 조립하는 방식으로 프로그래밍을 할 수 있고 재사용이 가능한 컴포넌트는 코드의 유지보수성과 확장성을 증가시키고, 개발 속도를 향상시킨다.

3. 단방향 데이터 흐름

리액트는 부모 컴포넌트에서 자식 컴포넌트로, 한쪽 방향으로 데이터가 전달된다. 이는 데이터를 쉽게 추적할 수 있게 한다.

4. JSX(자바스크립트 XML)

리액트는 자바스크립트 코드를 HTML처럼 표현할 수 있는 리액트 엘리먼트를 생성한다. 즉, 자바스크립트 함수가 HTML코드를 반환하거나 HTML에 자바스크립트 변수를 넣어서 사용할 수 있다.

React와 Next.js를 사용해서 프로젝트를 만든 이유

리액트는 자체만으로 많은 장점을 가진 라이브러리지만 라이브러리이기 때문에 부족한 점이 있을 수밖에 없다. 그렇게 때문에 특정 기능 구현을 위해 다른 라이브러리와 함께 사용을 해야 한다.(ex. react-router) Next.js는 리액트기반 프레임워크로 리액트 라이브러리만으로 해결하기 어려운 점들을 제공해 준다. 내가 생각하는 Next.js를 사용했을 때의 장점은 다음과 같다.

1. 라우팅 기능 제공

➡️ 리액트는 라이브러리를 따로 설치해야 하지만 Next.js(13 버전)는 기본 app폴더 안에 라우팅 기능을 제공한다. Next.js는 file-system based router를 사용하여 app폴더 안에 폴더(=경로)를 생성하고, 그 안에 page.js 컴포넌트를 생성하여 해당 경로에 대한 UI를 사용자에게 보여주게 만들면 된다.

2. 서버 사이드 렌더링(SSR)을 제공

➡️ 리액트 18 버전 이후부터는 server component를 사용하여 기존 CSR만 가능한 상황에서 SSR까지 가능하게 해 주지만 기본적으로 SSR을 지원하는 Next.js 프레임워크를 사용하면 더 간편하게 구현할 수 있다.

➡️ Next.js의 컨셉인 하이드레이션(Hydration)을 사용함으로써 다양한 렌더링 기법을 적용할 수 있게 해 준다.

➡️ 하이드레이션을 기반으로 렌더링 기법을 접목하여 하이브리드(Hybrid)와 같이 페이지에 맞는 렌더링 기법을 적용할 수 있다.

➡️ SSR을 통해서 SEO를 향상할 수 있다.

React 사용 자체만으로 얻을 수 있는 장점

그렇다면 React는 Next.js프레임워크와 함께 사용했을 때만 더 효율적인 것일까? 만약 React로 웹사이트를 구축하다면 그 이유는 무엇이라고 대답할 수 있을까? 내가 생각하기에는 다음과 같은 이점 때문에 리액트만을 사용한다고 생각한다.

1. 프로젝트 커스터마이징

리액트는 라이브러리이기 때문에 기능 구현을 위해 추가로 필요한 도구들(=라이브러리)을 사용할 수 있다. 이는 개발자가 스스로 라이브러리를 선택할 수 있기 때문에 설계 측면에서 다른 프레임워크나 라이브러리의 의존성 없이 자유롭게 변경하고 확장시킬 수 있다.

2. CSR을 적용하는 것이 웹사이트에 더 효율적인 경우

리액트 18 버전에서는 서버컴포넌트를 사용하여 SSR도 적용 가능하지만 리액트는 기본적으로 CSR을 지원한다. CSR은 렌더링 하는 주체가 클라이언트인 것을 의미한다. 서버에서 HTML과 React 소스코드, JS 소스코드를 클라이언트에 보내 주면 클라이언트에서 DOM요소를 생성하는 렌더링 방식이다. 초기로딩까지 시간이 필요하지만 서버에서 받아올 데이터가 적은 경우, TTV(Time To View)의 시간을 단축하면서 동시에 TTI(Time To Interact)를 할 수 있으므로 CSR은 빠른 사용자 경험을 제공한다.

 

이 외에도 리액트의 버전이 업데이트되면 바로 업데이트를 적용할 수 있는 점, 최소한의 기능만 넣어서 프로젝트를 만들 경우 번들 크기를 축소하여 최적화할 수 있다는 점 등이 위에서 나열한 [React를 사용했을 때 특징]과 더불어 리액트만을 사용했을 때 얻을 수 있는 장점이라고 생각한다.

요약하자면 

✔️ 리액트는 많은 개발자들이 사용하고 관심 갖는 라이브러리이므로 앞으로 오래 사용되고 발전 가능성이 크며 그만큼 커뮤니티와 생태계가 잘 구축되어 있다.

✔️ 가상돔을 적용한 성능 개선과 컴포넌트 단위로 코드를 작성하는 것에 대한 이점과 같이 리액트가 가진 특징으로 효과적으로 애플리케이션을 만들 수 있다.

✔️ 리액트 프레임워크인 Next.js와 함께 사용하여 더 많은 기능을 더 효율적으로 가능하게 해 준다.

✔️ 리액트는 그 자체만으로 충분히 효율적인 웹사이트를 구축할 수 있다.

 

글로 한번 정리하니 머릿속에서만 떠오르던 단어들이 명확한 문장으로 정리된 듯한 느낌이다. 무슨 분야를 선택하던 무엇을 배우고 사용하던 항상 이유를 설명할 수 있고 이유를 찾기 위해 스스로 고민하는 개발자가 되어야겠다는 생각이 뚜렷해졌다.

 

 

---