React와 Gatsby의 관계(스택오버플로우에 질문하고, 처음으로 reputation 10을 get!)

JavaScript, React를 deep dive하다보니 Gatsby라는 것도 관심있게 보게됬다. 근데 도통 정적 사이트 생성기라는데, 그런거면 html을 처음에 다뽑는다는 소린데, 대체 React는 무슨 역할을 하는거지? 하고 혼란스러워했다. 이건 아마도 내가 아직 JS환경에대한 이해가 부족하기 때문인것 같다. 

 

Gatsby 공식 사이트

이 사이트를 가면 문서를 이쁘게 잘 써놨다. 아직 많이는 못봤는데, 읽으면서 프론트엔드 및 Web의 생태계에 대해서도 더 이해를 할 수 있을만큼 잘써두었다. 예전에 Django를 할때는 공식사이트가 매력이 안느껴졌는데, NextJs나 Gatsby는 공식사이트가 너무 예뻐서 공식문서 읽는 재미를 붙이기 너무 좋은것 같다. 

 

여튼 stackoverflow에 아래의 질문을 남겼다. 

How does React work on Gatsby (Statically Generated?)

How does React work on Gatsby (Statically Generated?)

대체 React는 Gatsby에서 어떻게 동작한다는거야!!! 이게 내 질문이었다. 

 

본문 내용은 아래와 같다. 

 

요약하자면, Gatsby로 정적 생성을 한다는데, 이말이 즉슨, React가 vdom을 이용해서 효율적으로 dom 변화를 해주는 것을 이제 못한다는 말이냐? 였다. 내 짧은 지식으로 html을 다 생성한다면서 이게 대체 뭔소리냐.... 싶었던 것이다. 

 

 

그런데 두개의 답변이 달렸는데 너무 큰 감동이었다. 

 

 

Thank you Ferran Buireu!!!

답변 정리:

 

Gatsby는 정적 사이트 생성기이고, 이말은 즉슨, HTML은 우리가 사이트에 진입할때 이미다 빌드가 되어있다는 소리다! 그럼으로써 불필요한 리퀘스트나 파싱, 그리고 컴파일 타임(php같은 언어를 쓰는 사이트에서 html을 생성할때 소요되는 시간)이 안들게된다. 이건 미리 빌드타임때 HTML을 생성하고, 디펜던시를 번들링하고, 필요한 데이터를 컴파일할때 미리다 페칭하고(필요한 데이터는 마크다운 형태, CMS, JSON 등등의 형태) 이때 GraphQL을 사용해서이다. 데이터 소스에 따라, slug나 다른 원하는 필드로 동적으로 페이지를 생성할 수도 있다(이부분은 Gatsby에 대한 추가적인 이해가 필요할듯!) 이렇기 때문에 SEO에 상당히 좋다!!

 

이렇게 생성된 HTML파일들은, React환경(React ecosystem)도 같이 번들이 되어있다. 그래서 DOM 조작이나, React를 통해서 virtual DOM을 조작하는것도 당연히 가능하다! 그리고 life cycle methods나 훅도 당연히 쓸 수 있다. 그리고 CSS 모듈이나, styled-components도 사용가능하고, @react/router의 <Link> 컴포넌트를 사용한 라우팅또한 가능하다. 그니까, Gatsby를 통해서 모든 React의 이점들을 누릴수 있고 그외에도 장점들이 있다. 즉, React로 할 수 있는건, Gatsby로도 다 가능하다!!

 

"Static(정적인)" 의 뜻은, Gatsby를 논할때는 데이터를 빌드 타임에 fetching하고 각각의 html을 생성하는 것을 말한다. 유저를 위한 동적인 사이트를 React나 Js가지고 못만든다는 말이 아니라. 

 

React 공식 사이트도 Gatsby로 만들어져있다.

 

 

두번째 답변도 만만치않게 좋았다. 

 

Thanks A Webb!!!

Gatsby는 하이브리드 프레임워크로, data hydrated page 빌드를, 빌드 타임이나, 런타임, 둘다 할수있게 해준다. 이 패러다임은 언제 데이터를 사용가능한지에 근간을 두고 있다. 예를들자면, website의 제목이 빌드타임에 이미 포함되어있고, 컨텐츠는 런타임에 변할 수도 있게. 

 

Gatsby로 완전히 정적인 사이트도 만들수 있지만, 완전 다이나믹한 페이지를 만들수있다.(이런 경우에도 어딘가 static data가 있겠지만..!) 이때 Gatsby가 짱인게, 런타임에 보여지는 데이터를 기다리는 동안, 정적인 데이터를 빨리 보여주기때문이다! 즉, 먼저 그려놓고, 인터렉티브한건 천천히 한다는것. 

 

Gatsby가 React를 사용한다는 것은 Gatsby app에서 React의 모든 기능을 사용할 수 있단 것이다. 즉, 페이지에 따라서, VDOM을 통해서 dom 조작도 가능하다. (첫답변에서 말했듯, Gatsby가 react도 번들해서 올려주기떄문)

 

React개발자로써, 나는 어떤 프레임워크를 사용할지 선택하는 원칙이 있다. 

• 웹사이트 개발 - Gatsby
• Web-app 개발 - Next.js
• Dashboard 개발 - Create-React-App

 

답변을 통해서 좀더 React와 가까워진것같다. 

 

더불어 어제 stabbdom vdom을 이용해서 React를 간단하게 구현해봤더니, React가 vdom으로 dom을 핸들링한다는게 좀더 감이 와서 그런지 위의 답변들이 더 많이 도움이 됬다. 

 

github.com/hayoung0Lee/react-building

hayoung0Lee/react-building

이건 어제한 프로젝트!

 

 

그리고 이질문을 통해서 처음으로 Reputation 10을 얻었다!!! 개발이 은근 꽤 재밌는것 같다.