shopify Hydrogen 프레임워크

이명진·2022년 5월 25일
0

web. 웹 공부

목록 보기
4/8

shopify의 Hydrogen 프레임워크를 쓰게되어서
공부를 하고 정리를 해본다.
공식 문서가 영어라서 내가 해석하고 이해한 바를 정리한것이라서
내용이 틀릴수도 있다.

shopify

쉽게 생각해서 쇼핑몰을 간략하게 지원해준다.
혼자서 쇼핑몰을 만들때 코딩을 잘모르면 유용할것 같다.

css를 보더라도 각 기능들을 정리해놓고 부품처럼 끼워쓸수 있는 기능이 있지 않은가.
그런거와 비슷하다.
관리자 페이지에서 상품을 등록하면 판매할수 있도록 페이지를 만들어 준다.

graph-QL을 활용한다.

shopify 홈페이지에서 두가지 버전을 받을수 있다.
Hello World 버전이랑 Demo Store 버전이 있다.

Hello World 버전

그냥 기초부터 자신의 디자인으로 쇼핑몰을 만들때 사용할수 있다.
리액트 프레임워크를 사용할때 설치다하고 난 이후의 모습이다.
자유도가 높다. 친절한 설명이 없어서 받기는 어려울것 같은데 깃주소로 클론 받을수 있다.

Demo Store 버전

쉽게 몇몇 의 디자인을 해두었다. 쇼핑몰 기본 틀은 다짜여져 있어서
기본 소스만 몇개 공부하면 사용할수 있을 정도이다.
활용도 어떻게 설치하고 사용하는 기초 방법에 대해서 홈페이지에 이미지와 gif를 첨부해서
보기 쉽게 설명해준다.

나는 처음 맛보기로 Demo Store 버전을 설치해서 봤는데 생각보다 복잡하다.

Hydrogen

shopify에서 사용하는 프레임 워크이다.
리액트 + vite를 사용한다.

리액트 최신문법을 활용하여 sever.jsx , client.jsx 컴포넌트를 활용해
서버 랜더링 , 클라이언트 랜더링을 사용할수 있다.

쭉쭉 읽다가 중요하다고 생각되는 부분을 정리해 보았다.

shopify측에서 만든 프레임워크인지는 잘모르겠지만 훅스가 상당히 많다.

fetching data

데이터 불러오기 훅

  • useShopQuery : 서버 컴포넌트에서 사용한다. GraphQl을 파라미터로 보낸다. 클라이언트 컴포넌트에게 props로 데이터를 전달 한다.

  • fetchSync : 클라이언트 컴포넌트에서 이용 , HTTP request 를 받는다. const post = fetchSync('https://3p.api.com/post.json').json(); 이런식으로 사용

  • useQuery

sever 컴포넌트에서 context 를 사용하면 안된다.
context 는 전역 변수 같은것 같다. 리덕스 (?)

서버 컴포넌트에서 context쓰면 안되고 클라이언트 컴포넌트에서는 가능하다.

Suspense

suspense 컴포넌트로 감싸면
ssr 이 가능하다. (불러오기 전에 다 보이고 순차적 불러오기 )
감싸지 않았따면 다 로딩될때까지 하얀 화면 이 뜬다

useServerProps

서버 컴포넌트에서 쓸수 있는 전역 props 인듯 싶다.
리액트에서 state 처럼 쓰는것 같다.

const {setServerProps, pending} = useServerProps();
이렇게 쓰고 setState처럼 값을 바꿀때는
setServerProps('selectedProductId', 123); 이렇게 쓰이는것 같다

setServerProps(key, value);

최상위 까지의 props를 바꿀수 있다.

setServerProps(newValue);

새 개채값을 뿌려준다.

setServerProps((previousProps) => object);

state값을 업데이트 하고 콜백함수를 실행한다.

기본적인 훅스 들이다. 추가로 훅스 모음 페이지가 따로있는데 나중에 따로 확인해서 정리 할 예정이다.
지금은 기본 hydrogen 프레임워크 공식문서에서 잠깐 잠깐 나온 훅스에 대해서 정리해보았다.

profile
프론트엔드 개발자 초보에서 고수까지!

0개의 댓글