드디어 코드캠프 첫 주 마지막날이다.
라우터 객체와 라우팅
라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체를 말한다.
이 객체를 사용해서 a페이지에서 b페이지로 이동할 때, "b 페이지로 라우팅" 한다고 말한다.
라우터를 사용할 때는 import를 해줘야 한다.
import Router from 'next/router'
const router = useRouter(); // 이렇게 라우터라는 변수에 라우터를 담는다.
router.push("/") 이렇게 주소를 적어주면 다른 페이지로 이동이 가능하다.
정적라우팅과 동적라우팅
정적라우팅은 우리가 만약 로그인 페이지로 이동을 했을때 항상 로그인 페이지가 나오는 것을 말한다.
반대로 동적 라우팅은 게시판 상세보기와 같은 경우에는 글 번호에 따라서 주소가 변경이 된다.
즉 id나 번호값으로 게시판을 동적으로 계속 만들어 준다.
정적라우팅은 수동으로 계속 페이지를 만들어줘야 하는 번거러움이 있다.
근데 만약 글이 1000개 10000개가 넘어 가면 정적라우팅으로는 한계가 있다.
그래서 동적라우팅을 사용해야 한다.
넥스트js에서는 동적라우팅을 제공해 주고 있다.
사용 방법은 하위폴더에 [] 대괄호로 감싸주고 [name] 대괄호 안에 폴더이름을 적어준다.
그리고 이 대괄호 폴더안에 js파일을 만들어 주는 것이다.
비동기 통신과 조거부렌더링
자바스크립트는 작성된 코드가 상단에서부터 순서대로 실행이 된다.
그러기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 상태이다.
그래서 첫 화면이 그려지는 시기에 데이터를 불러오면 에러가 발생한다.
이 부분을 해겨랗려면 화면을 미리 그려놓고 데이터를 그려줘야 한다.
방법으로는 조건부렌더링을 사용한다.
조건부 렌더링에는 &&연산자,삼한연산자, 옵셔널체이닝이 있다.
삼항 연산자.
data ? data.fetchProfile : undefined
// 이것은 왼쪽에 데이터가 있으면 가운대가 실행이 되고 없으면 undefined가 실행이 된다.
즉 초기에는 이방법을 썼지만 있을 때와 없을 때를 모두 써야하는 불편함이 있었다.
&& 연산자(Nullish coalescing)
data && data.fetchProfile
&& 연산자는 왼쪽의 data가 없으면 undefined를 반환시켜준다.
그리고 있으면 오른쪽이 실행이 된다.
&& 연산자와 반대의 연산자가 있다.
|| 연산자이다.
data || data.fetchProfile
이 연산자는 data가 거짓이면 오른쪽이 실행이 된다.
옵셔널 체이닝(Optional-Chaining)
기존의 연산자를 쓰면서 길어졌던 코드를 더 줄이기 위해 만들어 졌습니다.
data?.fetchprofile
완전 간결해 졌습니다.
옵셔널 체이닝이란 연산자 앞 객체의 참조가 undefined || null 이라면 undefiend를 리턴해준다.
