[TIL] 9월 3일 Router!!

부트캠프 시작한지 벌써 일주일이 지났다.

오늘은 어제에 이어서 통신관련 부분을 배웠다.

어제는 Mutation을 통해 서버에 데이터를 보내고 데이터를 받아오는 연습을 했다.
오늘은 Query를 통해 받아온 데이터를 다른페이지에 그려주는 실습을 했다.

어제 Mutation으로 데이터를 받아올때는 동기방식으로 진행했다. 동기방식으로 진행했기 때문에 백엔드 서버에 요청한 내용들을 눈으로 확인할수 있었다.

오늘은 비동기방식 실습을 했다.

게시글 등록을 하면 Mutation을 통해 데이터를 서버에 보내고 받아온 리턴값으로 Query를 요청하고 받아온 데이터를 이동할 페이지에 그려주는 실습이다.

예를들면 게시글 등록버튼을 누르면 상세페이지로 이동해 등록시 입력한 데이터를 함께 보여주는 것이다.

비동기방식으로 하면 데이터를 다받을때까지 기다리지 않아도 먼저 가지고 있는 데이터로 화면을 그려줄수 있으며, 전달받은 데이터가 없더라도 빈화면으로 그려주게 된다.

만약 동기방식으로 진행하면 데이터를 받을때까지 기다리고 만약 데이터가 없다면 화면을 그려줄수 없게 된다.

위 방식을 진행하기 위해서는 router를 이용해야 한다.

Router

Router는 페이지 이동 도구이다.

페이지 이동이기 때문에 페이지가 2개 필요하다.

Routing 페이지 (정보를 보낼 페이지 ex. 게시글 등록)
Routed 페이지 (정보를 받을 페이지 ex. 게시글 상세페이지)

먼저 Routing 페이지 부터 살펴보자.

Routing Page

Routing Page 과정을 크게 나누면 4가지 이다.

1. Import
2. const Router 생성
3. Mutation 함수 실행부분에 Router.push 삽입
4. Routing을 위한 폴더주소 연결
   *동적라우팅, 정적라우팅

Routing Page Import 부분

Router 기능을 사용하기 위해 useRouter를 import 해온다.

import { useRouter } from 'next/router'

Routing Page const Router 생성 부분

import 한 useRouter를 사용하기 위해 useRouter를 담을 변수를 선언한다.

const router = useRouter()

Routing Page router.push 삽입

위에서 말했던것처럼 Router는 페이지 이동 도구이기 때문에 router.push는 페이지를 이동하라는 말이다.

코드가 조금 잘렸지만 const result는 게시글 등록하기 버튼 onClick함수 안에 있는 변수고

게시글 등록했을때 게시글에 있는 정보들을 서버로 요청후 return 값으로 _id를 받게 되어 있다.

그 코드 아래 router.push를 적어주면 게시글 등록하기를 눌렀을때

그과정이 모두 끝난후 페이지를 이동한다.

Routing을 위한 폴더주소 연결

router.push(상위폴더명/${Mutation 후 return값})

주소연결은 이렇게 진행한다.

사이트의 메인주소가 www.naver.com이라고 가정해 보면
게시글등록하기를 눌렀을때 아래페이지로 이동한다.

www.naver.com/BoardsDetail/Mutation 후 return 값

만약 Mutation 후 return 값이 100 이라

www.naver.com/BoardsDetail/100

이런식으로 이동된다.

여기서 주소 뒤에 ${} 를 사용하는 이유는 저렇게 감싸주지 않으면 위 사진의 주소는 아래와같이 이동한다.

www.naver.com/BoardsDetail/result.data.createBoard._id

즉 리턴받은값이 아니라 함수 전체가 들어가기때문에 ${}로 감싸준다.

동적라우팅과, 정적라우팅

라우팅은 페이지 이동도구이며, 페이지 이동시 폴더로 이동해 페이지를 불러온다.

만약 page가 100개라면?, page가 1000개라면? 그만큼 폴더를 많이 만들어 줘야한다.

page마다 모든 폴더를 만들어서 해당폴더를 불러오는것이 정적라우팅이고

폴더 하나에 여러가지 page를 집어넣은후 불러오는것이 동적라우팅 이다.

이때 폴더명 사용법은 [폴더명] 이렇게 작성해주면 된다.

이제 라우팅페이지에서 설정할 내용들은 모두 설정 되었다.

이동되는 페이지를 알아보자.

Routed Page

이동될 페이지에서는 아래방식을 설정해 줘야한다.

1. Import (useQuery, gql, useRouter}
2. const router 변수 설정
3. useQuery 설정
4. 등록페이지에서 넘어온 데이터 표시해줄곳에 바인딩

Import

이동될 페이지에서동 사용할 기능을 Import 해준다.

이페이지에서는 Query를 사용할것이기 때문에 useQuery, gql, useRouter 3가지를 Import 해온다.

Import 후에 어떤것을 조회할지 gql 부분에 작성해준다.

gql 작성시 productId를 통회 조회할 것이며 productId의 타입을 정의해준다.

productId는 Routing 페이지에서 return 받은 값이다.

useQuery 설정

const router = useRouter()를 통해 router 변수를 생성해준다.
그후에 Query를 이용해서 데이터를 받아야 하기 때문에 아래처럼 작성해준다.

const {data} = useQuery(FETCH_PRODUCT, {variables:{productId: (router.query.bbb}}

이부분은 아직 문법이 정확히 익숙하지 않아서 전체적으로 이해를 하지는 못했다.
여기서 가장중요한부분은 variables 안에 있는 부분이다.

variables : (router.query.bbb)

끝에 있는 bbb는 바로 폴더명이다.

동적라우팅을 위해서 [bbb]폴더를 만들었고 그 폴더명을 여기에 적어준다.

Graphql 문서에 있는 변수명을 적는것이 아니라 주의해야한다.
(이부분에서 2시간은 해맨것 같다.)

등록페이지에서 넘어온 데이터 표시해줄곳에 바인딩

받아온 정보들을 이동된 페이지에 그려줘야 한다.
productId 부분은 쿼리 요청시 받은 정보이기 때문에 {router.query.bbb(폴더이름)}으로 적어준다.

나머지 부분들은 productId를 이용해 Query를 요청해 거기서 조회된 데이터들을 짝맞춰서 넣어준다.

{data && data.fetchProduct.seller}

이런식으로 바인딩 되어 있는데 data.fetchProduct.seller 이부분은 데이터 요청 부분이며 앞에 data && 이렇게 되어있는건 조건부렌더링이다.

조건부렌더링 {data && data.fetchProduct.seller}

(data && data.~ : data가 있으면 data.~ 를 실행 한다.)

이부분은 아래처럼 2가지 방법으로 변경 가능하다.

3항연산자 : {data ? data.fetchBoard.writer: “loading...“}

data 가 없을때 loading.... 이런 문구가 나오게 할수도 있고

옵셔널체이닝 : {data ?. fetchBoard.writer}

이런식으로 축약형으로 사용할수도 있다.

이번주에 배운내용을 간단하게정리해보면

1. emotion
2. state
3. Graphql(mutation, Query)
4. Graphql vscode에서 실제적용

이정도 되는거 같다.

emotion과, state 사용은 어느정도 익숙해 진거 같은데
Graphql mutation과 Query는 아직 문법 숙지가 덜된거 같다.
최대한 다시 돌려보고 다시 써보면서 이해해야할거 같다.