[06] Static, Dynamic Routing

acwell94·2022년 3월 18일
0

API

목록 보기
2/4

1. 라우팅이란?

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체로 이 객체를 사용해서 페이지 이동하는 것을 라우팅 한다라고 함.

참고 : https://nextjs.org/docs/api-reference/next/router

2. 라우팅 종류

가. 정적 라우팅

/login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나오는데 이런 것을 정적 라우팅이라고 함

나. 동적 라우팅

1) 게시판 같은 경우 글 번호에 따라서 주소가 변경 되야 함.
2) 하지만 게시판이 100개, 1000개 무수히 많을 경우 정적 라우팅의 경우 하나 하나 페이지를 만들어야 하는 불상사가 생김
3) 따라서 이러한 문제점을 효과적으로 처리하는 것을 동적 라우팅이라고 함

ex) /board/1 => 1번 게시글 이동 2면 2번 게시글로 이동

3. 동적 라우팅 사용법

가. 보여주고 싶은 폴더를 []로 감싸서 만들어서 index.js를 만들어 줌

나. 대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰여진 변수명에 담겨져 꺼내서 조회가 가능함(대괄호 안에 폴더명은 변수명이라고 생각)

다. router.query = { boardId: 1} 처럼 만들면 1번 게시글 꺼내올 수 있음

4. 비동기 통신과 조건부렌더링

가. 자바스크립트는 상단부터 실행되기 때문에 데이터 요청 후 응답을 받아 오는 동아 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생함

나. 이 부분이 효율적으로 실행괴기 위해서 화면을 미리 그려놓고 데이터를 불러오기 위해서 조건부 렌더링을 사용함

5. 조건부 렌더링

가. 조건부 렌더링 방법

1) 삼항연산자
가) data ? data.fetchProfile : undefined
2) &&연산자
가) data && data.fetchProfile
나) &&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해줌
3) 옵셔널 체이닝
가) data?.fetchProfile
나) 최신문법임 이거 쓰자

6. apollo-client graphql 쿼리 실행

가. 실행법

1) useQuery, gql을 import 해온다
2) graphql 사용하듯이 const FETCH_BOARD = gql``식으로 만들어 준다
3) const {data} = useQuery(FETCH_BOARD){}로 만들어줘야됨
4) 조건부 렌더링으로 div 만들어 주면 끝

7. try, catch

데이터 호출이 항상 성공적이지만은 않기 때문에 반드시 실패할 때 보여줄 것도 만들어 줘야하는데 그것을 try, catch라고 한다.

가. try

1) 데이터 호출이 성공됬을 때 사용
2) try {}로 쓰며 {}안에는 await함수를 사용하여 데이터 호출 성공시 보여줄 정보들을 담음

나. catch

1) 데이터 호출을 실패했을 때 사용
3) try{}뒤에 catch(){}로 사용하며 {}안에 데이터 호출 실패시 보여줄 정보들을 담음

다. finally

1) 성공하던 실패하던 무조건 실행하며 log기록을 남김 데이터 분석용
2) catch(){}뒤에 finally{}로 사용

profile
적는 자만이 생존한다.

0개의 댓글