내가 1인 프로젝트에서 더이상 리액트를 사용하지 않는 이유

이번에 포트폴리오 웹 페이지를 만들기 위해, React 를 사용할 것인지 Next 를 사용할 것인지에 대해 많은 고민을 했다.

 

개인적으로 혼자서 https://wak-quotes.vercel.app/ 를 개발할 때, 넥스트의 강력한 기능들이 참 마음에 들었다.

리액트 기반 프레임워크답게 routing, data fetching 등등 많은 기능들이 정리되어 있고,

개발자의 선택에 따라 SSR, CSR 을 선택할 수 있다는 점도 마음에 들었고,

(정적 페이지가 SEO 면에서 매우 유리하다고 느꼈다)

풀스택 프레임워크라는 점도 좋았다.

여러모로 1인 개발을 하기에 정말 부족함 없는 프레임워크였다.

 

그러나 포트폴리오 페이지를 만들 때, Next 의 많은 기능들이 다 필요가 없다는 생각이 들었다.

단순히 SPA 를 하나 만들 뿐인데, 이러면 리액트로 충분하지 않을까?

라이브러리 찾아서 bundling 하는 약간의 수고만 들이면, 리액트로도 충분히 멋진 1개의 반응형 페이지를 만들 수 있다.

 

그래서 리액트를 사용할 마음으로 공식 문서에 들어가봤는데,

공식문서의 글을 읽어보고 마음이 바뀌었다.

 

 

---

 

if you’re building a new app or a site fully with React, we recommend using a framework.

 

위의 인용구는 리액트 공식문서의 deep-dive 섹션의 개요에 나와있는 말이다.

https://react.dev/learn/start-a-new-react-project

Start a New React Project – React

 

리액트에서는 그 이유를 다음과 같이 설명하고 있다.

1. 처음에는 routing 이나 data-fetching 같은 기능이 필요 없을지라도, 당신은 개발중에 점점 많은 라이브러리들이 필요해지고 그것들을 추가할 것이다.

2. 자바스크립트 번들이 점점 커질 수록, 당신은 그것을 route 로 다 쪼갤 필요를 느낄 것이다.

3. 리액트로 페이지를 만들더라도, 후에 data-fetching 이 점점 복잡해질 수록 당신의 앱은 점점 느려진다. 당신은 언젠가 정적 페이지 완성 기능이 필요할 것이다.

4. 이는 비단 react 뿐만의 문제가 아닌 svelte 나 vue 에서도 동일하게 일어난다. 그래서 svelt 에도 sveltKit 이 있고, vue에는 Vuxt 가 있고, 리액트도 마찬가지인 것이다.

5. 위의 모든 문제점들을 react 기반의 프레임워크들이 해결해준다.

 

따라서 리액트에서는 프레임워크를 사용하지 않고 리액트만을 사용하기를 추천하는 상황은,

이미 개발된 웹 페이지에서 리액트 페이지를 추가하고 싶은 경우로 한정하고 있다.

 

---

 

따라서 위의 글을 종합하여 내린 결론은,

 

리액트는 이미 만들어진 웹사이트, 혹은 Java Spring 처럼 대규모의 서버와 백엔드 팀이 따로 있는 경우 등등에서 유연하게 리액트를 사용하고 싶을 때 사용한다.

처음부터 fully-React 한 웹/앱을 개발할 때는 프레임워크를 사용한다. (공식문서에서 추천하는 방법)

 

포트폴리오 페이지를 만든다고 해서 나중에 처음 설계한 사양에서 바뀌지 않을 거란 보장도 없고,

Next 를 사용해서 개발하는 것이 개발 속도도 더 빠를 것임에는 자명하다.

내 생각에도 리액트 팀의 주장이 합리적인 것 같다.

 

따라서 이번 포트폴리오 페이지는 비록 SPA 이더라도, Next 로 개발할 것이다.