라우팅(Routing), 조건부 랜더링

라우팅이란?

• 페이지를 이동하는 방법

정적/동적 라우팅

• 정적 라우팅 : 페이지마다 폴더를 만들어서 그 폴더로 이동하는 방식

• 동적 라우팅 : 폴더 내부에 [ ]으로 만들어진 폴더를 만들어서 자동으로 이동하는 방식

  ex)
  <정적라우팅>
  board라는 폴더안에 1, 2, 3, 4 ... 폴더를 전부 만들어야 함

  router.push('board/1') => localhost:3000/board/1
  router.push('board/2') => localhost:3000/board/2
  router.push('board/3') => localhost:3000/board/3
  router.push('board/4') => localhost:3000/board/4
  .
  .
  .
  <동적라우팅>
  board라는 폴더안에 [boardId]폴더 하나만 만들면

  router.push('board/index')를 통해 어떤 페이지든 이동할 수 있음

  router.push() 괄호안에서 폴더구조와 변수를 동시에 이용하고 싶을 때

  • 템플릿 리터럴 : 따옴표 대신 백틱(``)을 사용하고 ${}를 이용해 사용 할 수 있다.
    

조건부 랜더링

• 조건 && ~~
  조건이 참(true)일 때만 &&연산자 뒤의 내용을 실행
  

  위와 같은 경우 data의 값이 없으면 에러가 발생하기 때문에 data의 값이 존재할 때만 이라는 '조건'을 걸고 실행함

• 조건 ? (true일때) : (false일때) : 삼항연산자

  조건이 참일때 실행하는 내용과 거짓일때 실행하는 내용을 지정
  

  data가 존재한다면 number값을 가져오고 data가 존재하지 않는다면 Loading...을 띄워라