라우팅

라우팅

const router = useRouter()
이동 기능을 가지며
router.push("이동할 페이지")로 사용

정적(static)라우팅

• 일반적인 페이지 이동시 사용

동적(dynamic) 라우팅

• pages 안에 [aaa] 같은 식으로 aaa는 변수를 의미하며 페이지 이동시
  기존의 localhost:3000/boards/aaa가 아니다.

• localhost:3000/boards/ (1,2,3,.....) 괄호에는 들어갈 값이 자유로우며
  [aaa] 폴더 안에 만들어진 index.js로 모든 페이지가 실행된다.

• 실제로는 localhost:3000/boards/[aaa] 가 되며 aaa라는 변수를 활용하여 aaa페이지로 갈 수 있게된다.

사용은 아래와 같은 형태로 router.query를 이용한다

const router = useRouter()
    Number(router.query.aaa)  // 83011
    const { data } = useQuery(FETCH_BOARD, {
        variables:{number: Number(router.query.aaa)}
    })

같은형식으로사용

useQuery

FETCH_BOARD
	query{
		fetchBoard(number:6){
        	writer
            title
            contents
        }
    }

위 코드가 셋팅하는 부분이라 하면 아래코드로 실행한다.

const{data} = useQuery(FETCH_BOARD) <-실행부

• 페이지 접속시 자동으로 요청된다.
• mutation과 동일하게

data && data. 데이터 랜더링 = 데이터가 없으면 다음을 보여달란 뜻
data?.data Optional-Chaining = 위 데이터 랜더링의 최신버전?

철수는 바나나를 ${bananan}개 가지고 있고, 사과를 ${apple}개 가지고 있습니다.

백틱을 이용해서 위와같이 문자열+숫자를 사용가능
위와 같은 방식을 '템플릿 리터럴' 이라한다.