React와 SSR에 대한 간단한 고찰

친구가 급하게 연락을 했다. 자기가 2주 안에 React랑 Go를 급하게 공부해야 하는 일이 생겼단다. 코딩을 아예 안 해 본 건 아니었다. HTML, CSS, Javascript까지는 했는데, React 공부가 급하다는 것이었다. 회사 추천을 받아 들어가게 되었는데, React랑 Go를 만져본 적이 없어서 공부해 오라고 한 것이다.
React를 어떻게 가르칠 지 고민을 해 본 적이 없었다. 나는 개발하는 사람이었지 가르치는 사람이 아니었는지라… 암튼 급하게 2시간 정도 가르치게 되었다. 사실 정확히 말하자면 가르쳤다기 보다는 내가 React를 좀 보여준 수준에 가깝긴 했다.
가장 먼저 확인했던 건 기존에 만들었던 프로젝트였다. 코딩을 처음 해 본 것도 아니고, 웹에 대한 이해가 아예 없는 것도 아니었다. 물론 Client - Server 관련 기본적인 개념을 가지고 있는지 아직 확인한 것은 아니긴 하다. document.querySelector, document.querySelectorAll과 addEventListener 등의 기본적인 Javascript로 꽤 훌륭한 재고 관리 웹 서비스를 만들어 놓은 것을 확인했다.
처음으로 든 생각은, React가 뭔지 설명해야겠다는 생각이었다. 나한테 갑자기 “React가 뭐에요?” 라고 하면 “Javascript 라이브러리입니다”라고 대답할 것이다. 당연하다. 그게 맞기도 하고… React는 결국 자바스크립트 라이브러리다. “웹사이트를 만들 때 쓰는 라이브러리입니다”라고 대답해도 틀린 말이다. React를 웹 개발에 사용할 수 있는 건 React가 아니라 react-dom 덕분이기 때문이다. React Native의 경우 react-native가 뒤에서 받혀주고 있기 때문에 Native 환경 (Android 혹은 iOS 환경)에서 작동할 수 있는 것이기 때문이다.
친구한테 설명할 때는 “React는 라이브러리고, 이걸 잘 쓰기 위해서 여러 가지 프레임워크들이 있다.” 라고 말 해 주었다. 사실 뭐가 중요하겠는가. 엄밀히 말하면 저렇게 말하는 거고 엄밀하지 않게 말해도 개발하는 데는 지장이 없을 거니까.
React랑 Go 공부를 해오라고 했으면, React로는 Frontend를, Go로는 Backend를 만들 것이라는 추측은 쉽게 할 수 있었다. 그럼 여기서 고민이 또 되는 것이다. 친구가 가야 되는 회사가 너무 돈이 없어서 Static Site로 만들려고 하는지, SSR(Server Side Rendering)이나 ISR(Incremental Static Regeneration)등도 사용하려고 하는지 궁금했다. CSR(Client Side Rendering)만을 사용한다면, 나는 react-query랑 기본적인 React만 가르쳐도 되니까 말이다.
아무래도 그쪽에서 Next.js를 배우라고 하지 않고 React를 배워 오라고 한 것이었으면 CSR만 하는 것이라고 생각해도 괜찮을 것 같다. CSR 생각보다 괜찮다. 데이터 로딩 UI만 적절하게 대응해 주면 오히려 사용자경험이 더 좋을 지도 모른다. 100% Caching이 되고 직접 벡엔드 Region 설정을 해 줄 수 있으니까 말이다. Vercel을 보자. Vercel은 Serverless Function을 한 Region에만 배포해 준다. 그러기에 만약 Washington에 배포된 걸 한국에서 쓰게 되면 TTFB가 4초가 나오는 최악의 상황이 생긴다. 거꾸로 ICN(인천)에 배포된 걸 미국에서 쓰게 되면 똑같이 TTFB가 4초가 나올 것이다.
React에 가장 중요한 개념이 무엇일까… 다들 Prop과 State를 잘 쓰는 거라고 하는데, 고민 좀 해 봐야겠다.