230323 TIL

💫오늘의 깨달음

이번 리액트에 대해 복습하던 중 SPA에 대해 미처 알지 못했던 단점들과 JSX에 대해 기록해보고자 한다.

 

SPA의 단점

 

1. 자바스크립트 파일의 크기가 크다.

애플리케이션의 규모가 커지면 초기에 로딩해야 하는 자바스크립트나 CSS 번들 파일의 용량이 증가한다. 번들 파일의 용량 증가는 애플리케이션의 초기 로딩 성능 저하의 원인이 된다.

 

  이러한 단점을 보완하기 위해 `트리 쉐이킹`, `코드 스플리팅`과 같은 기법을 사용해 번들 파일 용량을 줄일 수 있다고 한다.나의 경우에는 리액트에서 css를 정의할 때 `styled-component`보다 `CSS in CSS` 방식인 `CSS module` 방식을 더 선호했다. 개인적으로 css는 css 파일에 정리되어 있어야 뭔가 마음이 편하고 가독성면에서도  모듈 방식이 더 좋았던 경험이 있었다. 나중에 알게 되었지만 이러한 습관이 최적화에 도움이 되고 있었다.

 

  반면 `CSS in JS` 방식인 styled-component가 굉장히 편리하지만 코드가 길어지고 복잡해질수록 가독성이 떨어진다고 느꼈었다. 그러나 이러한 이유 말고도 `CSS module` 방식의 경우 순수 css 파일이기 때문에 성능 면에서는 자바스크립트 코드에서 css를 작성하는 `CSS in JS` 방식보다 훨씬 좋다고 한다.

 

CSS in JS 단점 - 자바스크립트의 해석 과정인 재컴파일 되어야하는 점, 라이브러리 설치로 인해 번들링 용량 증가, 새로운 의존성 등이 있다고 한다.

 

2. 검색 엔진 최적화(SEO)에 좋지 않다.

  구글이나 네이버 같은 검색엔진의 검색 로봇은 자료를 수집할 때 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석한다. 하지만 SPA는 HTML이 거의 비었다 보니 검색 로봇이 충분한 자료를 수집하지 못해 SEO 최적화에 좋지 못하다.

 

  따라서 주로 SPA는 로그인이 반드시 필요한 서비스에 많이 사용되곤 했다. 하지만 요즘 검색 엔진 자체에서  SPA에서도 SEO 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있으며 초기 렌더링이 CSR보다 빠른 SSR의 장점을 이용해 Node.js 기반의 SSR을 도입해 CSR + SSR 형태(리액트의 경우 Next.js / Vue의 경우 Nuxt.js)로 개발하는 방식을 많이 사용해 각 방식의 문제점을 서로의 장점으로 상쇄해 어느 정도 단점을 보완할 수 있다.

 

css in css vs css in js 성능 비교에 대한 포스트 글

 

JSX도 표현식이다. 즉 자바스크립트의 객체이다.

 

  리액트 개발을 하면서 `{}` 안에 JSX 문법을 사용하는 것에 크게 신경을 쓰지도 않았고 굳이 궁금하지도 않았었다. 오늘 부트캠프에서 한 수강생 분께서 `{}` 안에는 JSX 문법에서 자바스크립트 코드를 사용하기 위한 것인데 왜 컴포넌트가 들어가는지? 컴포넌트는 JSX의 문법이지 않나?라는 질문을 주셨다... 순간 나도 궁금해서 React 문서를 찾아봤고 해당 질문에 대한 답이 있었다.

 

JSX도 표현식이며, 자바스크립트의 객체라고 한다. 즉 자바스크립트의 코드이다.

 

React 문서 - JSX