What's Happening in React?

리액트(React)는 여전히 세계에서 가장 인기 있는 자바스크립트 라이브러리 중 하나지만 새로운 트렌드와 기술의 등장으로 리액트 개발 생태계는 계속 변화하고 있다. 위 영상(출처; Lama Dev)은 최근 React의 입지 및 React의 미래에 대해 이야기하고 있다. 내용을 요약해봤다.

1. 리액트의 미래 (새로운 문서 페이지)

React 팀이 지난 3월에 새로운 문서를 발표한다고 했을 때 많은 사람들은 기대했다. 보일러플레이트인 create-react-app이 느리고 오래되었다는 불만을 지속적으로 제기했기 때문에 이번 업데이트 때 React 애플리케이션을 생성하는 방법에 대한 새로운 내용이 나오지 않을까 했던 것이다.

그러나 놀랍게도 이제 리액트 설치 페이지에서 이제 순수 React 라이브러리 대신 프레임워크를 사용할 것을 권장한다.

Many React frameworks support export to a static HTML/CSS/JS folder

Production-grade React frameworks

• Next.js
  • npx create-next-app

서버 측 렌더링(SSR)이 인기를 얻고 있고 React 팀이 이것을 지원하고 있는 건 알았지만, 공식 문서에서부터 프레임워크 사용을 권장하는 건 예상치 못한 일이었다.

2.리액트는 죽어가고 있는가?

전혀! 최근에는 Next.js나 Svelte와 같은 렌더링 프레임워크가 핫하면서 리액트의 점유율이 상대적으로 감소한 것은 사실이지만 여전히 리액트는 사용률과 재사용률에서 최상위에 위치한 가장 인기있는 라이브러리다. 또한 Vite와 같은 빌드 도구가 웹팩 대신으로 빠른 빌드 속도로 인기를 얻고 있으며, 새로운 리액트 문서 페이지에서도 Next.js를 이용한 설치가 소개되었기에 이러한 이유로 리액트는 여전히 많은 개발자들이 계속해서 사용할 것으로 예상된다.

3. CSR   VS   SSR

3-1. CSR

Client Side Rendering은 웹사이트를 방문할 때 서버로부터 빈 HTML 파일과 번들된 자바스크립트를 전송받은 후 사용자의 브라우저에서 번들링 및 최종 HTML 파일을 렌더링한다. 그래서 CSR 방식은 애플리케이션의 초기 페이지 로드가 느리다. 그렇기에 SEO에도 불리하다. 이 두가지 단점이 수익성에서 상당한 리스크를 안겨주기 때문에 SSR로 많은 사람들이 설계 방식을 바꾸고 있다.

3-2. SSR

Server Side Rendering은 웹사이트를 방문하면 서버가 요청을 받고 HTML 페이지를 렌더링하여 사용자의 브라우저로 전송한다. 이는 브라우저가 처음부터 모든 것을 렌더링할 필요가 없으므로 초기 페이지를 더 빠르게 표시하는데 도움이 된다. 또한 검색 엔진이 페이지를 크롤링하고 색인할 수 있게 되어 SEO에 유리한 결과를 가져올 수 있다.

그러나 SSR 방식도 장점만 있는 것은 아니다. 모든 것이 서버 측에서 발생하기 때문에 사용자와 상호 작용하는 것이 불가능하다. 결국 각각 장단점이 있고 프로젝트의 특성에 따라 선택되어야 하는 옵션이기에, React 개발자들은 최적의 사용자 경험과 검색 엔진 최적화를 위해 CSR과 SSR을 적절하게 조합하거나 선택하는 방법을 고민해야한다.

4. ReactJS+Vite  VS  Next.js?

이 영상에선 프로젝트 규모에 따라 React에 Vite 또는 Next.js를 함께 사용하는 것을 추천한다. 관리 대시보드나 인터랙티브 컴포넌트에는 SEO 없이 Vite로 React 프로젝트를 빌드하는 환경을 구축하라고 하는 반면, 광범위한 데이터를 불러오는 대규모 애플리케이션, 여러 페이지(예: 이커머스 애플리케이션) 또는 SEO에 의존하는 웹사이트(예: 블로그)의 경우 Next.js와 같은 프레임워크를 사용하는 것이 좋다고 평했다.

5. 선택은 개발자의 몫

"무엇을 해야 할까?"라는 고민에 빠지지 말아야 한다. 때때로 우리는 어떤 기술이나 프레임워크를 선택해야 할지 고민에 빠질 수 있지만 중요한 것은 그 고민에 빠지는 것보다는 실제로 도구를 사용하고 학습하며 경험을 쌓는 것이다. 조직적이고 계획적으로 학습하고 새로운 도구와 기술을 탐험해보는 것이 중요하다.

완벽한 언어나 프레임워크는 없다는 것을 잊지 말아야 한다. 언어나 프레임워크에는 각각 장단점이 있다. 완벽한 도구는 없으며, 사용할 언어나 프레임워크는 개인의 요구사항과 프로젝트의 특성에 따라 선택되어야 한다. 따라서 가장 적합한 도구를 선택하는 것은 개인의 판단에 달려있다.