React Router : 리액트 라우터

  React Router

SPA(Single Page Application) 단일 페이지 어플리케이션 

 단일 페이지에서 <main>만 바꿔서 랜더링 해주는 것은 방문 기록, 책갈피, 이전 페이지, 다음 페이지, 새로고침 등에서 문제가 생긴다. 페이지 주소 자체가 바뀌는 것이 아니라 같은 페이지에서 랜더링만 바꿔서 해주는 것이기 때문에 다른 페이지 같아도 책갈피를 하면 같은 페이지, 새로 고침을 하면 원래 불러와졌던 화면만 뜨는 문제점이 생긴다. 그래서 라우팅은 이를 해결하기 위한, 클라이언트의 요청을 처리할 endpoint를 찾는 과정이라고 할 수 있다. 

 

 경로(route)는 브라우저의 주소창에 넣을 수 있는 종말점을 뜻한다.

 

 index.js 파일에서 App 컴포넌트를 랜더링하는 대신 Router 컴포넌트를 랜더링한다. 랜더링/렌더링.. 외래어 표기법에 따르면 렌더링이 맞나보다. 라우팅 경로는 App.js에 설정한다. 

<외래어 표기법> 제 1장의 표기의 원칙

제1항 외래어는 국어의 현용 24자모만으로 적는다.

제2항 외래어의 1음운은 원칙적으로 1기호로 적는다.

제3항 받침에는'ㄱ,ㅅ,ㄹ,ㅁ,ㅂ,ㅅ,ㅇ"만을 쓴다.

제4항 파열음 표기에는 된소리를 쓰지 않는것을 원칙으로 한다.

제5항 이미 굳어진 외래어는 관용을 존중하되, 그 법위와 용례는 따로 정한다.

Lipsum(Lorem ipsum) 시각적인 요소를 보여주고 싶을 때 의미없이 채워넣는 텍스트

http://www.lipsum.com / http://hangul.thefron.me/ 

 

#라우팅 페이지(정보입력하고 보내는 페이지)

import { useRouter } from 'next/router'
import { gql, useMutation } from "@apollo/client"

const CREATE_BOARD = gql`
    mutation createBoardInput($createBoardInput : CreateBoardInput!) { 
        createBoard(createBoardInput : $createBoardInput) {
            _id
            writer
            title
            contents
            
        }
    }
`

....


router.push(`/boards/detail/${result.data.createBoard.boardId}`)

맨 위에서 import 해주고, gql playground에 있는 양식대로 맞춰서 써주고(밑에 사진 참고)

조건 충족시 router.push(₩경로/변수가 들어갈 자리₩)

근데 여기서 {}안에 들어가는 게 어디까지 정해져있는 거고 뭘보고 적어야하는건지 아직 잘 모르겠다. boardId는 어디서 나온 뿅뿅이란 말인가. .. .. 지금 boardId를 _id로 바꿔봤는데 페이지 이동은 된다. 음 원래 아무거나 적어도 페이지 이동되는게 맞는건가? 

 

{message: "Variable "$boardId" of required type "ID!" was not provided.",…}

검사 - 네트워크 들어가서 오류 들어가보니 이렇게 나온다. 필수 타입 "ID!"의 변수 "$boardId"가 들어오지 않았다고 합니다.

ID!는 fetchBoard가 요구하는 것...

 

#라우티드 페이지(push되어 이동하는 페이지)

import { useQuery, gql } from '@apollo/client'
import { useRouter } from 'next/router'

const FETCH_BOARD = gql `
    query fetchBoard($boardId:ID!) {
        fetchBoard(boardId: $boardId) {
            _id
            writer
            title
            contents
            
        }
    }
`

//export 안에 ▽

const router = useRouter();
    
    router.query.boardId
    const {data} = useQuery(FETCH_BOARD, {
        variables: {boardId: router.query.boardId}
    })

맨 위에서 import, playground 백엔드 양식에 맞춰서 써줌. 여기서 나온 boardId가 아까 쓴 boardId인가? .... 

 

export 안에 들어가는 부분을

router.query.boardId
    const {data} = useQuery(FETCH_BOARD, {
        variables: {boardId: router.query._id}
    })

로 바꾸니까 

이렇게 뜬다!!!!!! 드디어 데이터가 왔나보다. 페이지에 뜨진 않지만. 

그니까, 왜 받은 게 보드아이디가 아닌데 보드아이디를 넣는지 궁금했다니까!!!!!!! 내가 _id를 받았으니까 _id를 보내고 _id를 받는 게 맞는거지??? 그치? 근데 왜 페이지에 랜더링이 안될까... 헐 아니다 된다 된다된다 

 

해결!!!^_^

이게 동적 데이터를 넣은...걸까? 소프트코딩? 

아무튼 기뻐!!!!!!!!!!!!!!1몇시간동안 잡고 있던건데 하나하나 뜯어보니 풀리는구나ㅠ_ㅠ 앞으로 혼자 열심히 찾아보는 습관을 들여야겠다... 

 

참고로 라우티드 페이지에서 데이터를 표시하는 건

<S.Title>{data && data.fetchBoard.title}</S.Title>

이런식으로 표시했다! 

 

 

 

또 오류났던 것 

Unhandled Runtime Error

Error: null value in column "writer" of relation "board" violates not-null constraint

 

이게 대체 무슨 소리야?! 했는데 mutation 요청시 변수로 받아서 보내려면

const result = await callGraphql({
			variables: {
				writer,
				title,
				contents
			}
		})

이렇게 variables 보내는 걸 명시해줘야한다. (사실 당연함...) 난 그냥 await callGraphql() 이라고 써서 자꾸 저런 오류가 뜬 거였다.

writer(지정 양식) : writer(변수 이름) 이렇게 같으면 위에처럼 writer로만 써도 된다!

 

 

 

 

참고문헌 : 알렉스 뱅크스, 이브 포셀로, ⌜Learning React(러닝 리액트) 2판⌟