라우터객체: 페이지 이동과 관련된 기능을 가지고 있는 객체

기능에 관련한 링크 첨부!
https://nextjs.org/docs/api-reference/next/router

라우팅 종류

정적 라우팅 static routing

경로를 직접 입력하여야하고 또 폴더도 직접 만들어줘야 한다!
장점은 안정적이다! 오류가 일어날 확률이 적음

동적 라우팅 dynamic routing [페이지 이름을 변수명으로 설정한다]

폴더를 대괄호로 감싸서 변수명으로 만들어준다

이렇게 하면 여러 페이지를 만들지 않아도 페이지이동이 가능하다!

router.query = { boardId: 1 } 

이렇게 들어가서 자동으로 게시글 번호를 꺼내올 수 있다!

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

javascript는 작성된 코드가 상단에서부터 순서대로 실행되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다.

이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용합니다.

삼항 연산자

데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줍니다

data ? data.fetchProfile : undefined

&& 연산자

&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해줍니다.

data && data.fetchProfile

옵셔널 체이닝 (Optional-Chaining)

optional-Chaining은 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴해줍니다.

data?.fetchProfile