React | 동적 라우팅

katej927·2021년 2월 28일
0

React

목록 보기
6/8
post-thumbnail

📌 동적 라우팅이란?

  • 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)

  • 방법 (2가지)

    1. Query parameters

    2. URL parameters

📌 (라우트로 설정한) 컴포넌트의 3가지 props

  1. history

    • 이 객체를 통해 push, replace 를 통해

      다른 경로로 이동 or 앞 뒤 페이지 전환 가능

      ex. this.props.history.push('/page')

  2. location

    • 현재 경로 정보 & URL 쿼리 (/company_list?category=3)정보 보유
  3. match

    • 어떤 라우트에 매칭이 되었는지에 대한 정보 & params (/company_detail/:id) 정보 보유

📌 Query parameters

  • url의 주소: /company_list?category=3 인 경우
  • this.props.location을 통해서 해당 주소의 정보를 가지고 올 수 있음

👉 페이지 별 동적 라우팅

1. 로그인 성공 시 >> 리스트 페이지

  • 로그인 시도 → API와 통신 & 토큰 유무 확인 → 토큰 有

    → 로컬 스토리지 저장 & /company_list?category=3 주소의 URL로 이동

    ⇒ Query parameters 방식

    • /company_list?category=3 의미
      • /company_list 페이지에서 category=3 의 데이터를 화면에 보여줘라

2. 리스트 페이지 진입

  • 해설: 리스트 페이지에서 componentDidMount 함수 내부의 fetch 함수 부분
      1. this.props.location.search (코드 31번째 줄)

      2. 콘솔(this.props.location.search)?category=3

        = /company_list 뒷 부분

      3. .split("=")[1] 추가

        3 반환

        ⇒ 변수(queryId)에 저장

      1. fetch 함수를 통한 API 호출 (코드 36번째 줄)
      • URL parameters 사용
      • url 주소 끝에 보고 싶은 데이터의 고유 넘버 적음
  • cf) Query parameters 긴 경우
    • & 연산자로 얼마든지 길어질 수 있습니다.
    • 개발자가 의도한 query name의 value를 가져오기 위해선 함수를 그에 맞게 작성 해야 함

3. 리스트 페이지 >>> 상세 페이지 이동

  • 아이템을 Link 태그로 감쌈

    • 아이템 클릭 시 해당 상품의 디테일 페이지로 이동
  • 코드 해석

    디테일(company_detail) 페이지로 이동하면서 볼 상품의 ID(jobID)를 뒤에 덧붙임

  • URL parameters 사용

    • match
      • 라우트 매칭 정보 & params (/company_detail/:id) 정보
      • params
        • params 정보 ⇒ this.props.match.params 를 통해 가져올 수 있음

        • params 데이터 사용법

          • Routes.js 에서 디테일 페이지의 라우트 설정 수정

            CompanyDetailPage 컴포넌트에서 this.props.match.params.id를 통해 해당 값 가져오기 가능

        • 참고

          • URL 쿼리→ 컴포넌트에서 동적 사용 가능
          • params → 사용 전, 라우트에서 지정 필수

(리스트p → 상세p 이동 및 진입 요약 코드)

// Routes.js - CompanyDetailPage 라우트 설정
<Route exact path="/company_detail/:id" commponent={CompanyDetailPage} />

// CompanyItem.js - List 페이지에서 상품 클릭 시 상세 페이지 이동 경로 설정
<Link to={`/company_detail/${this.props.jobId}`}> ... </Link>

// 상세 페이지 진입 시 API 호출 주소 
fetch(`http://10.58.7.182:8001/job/recruitment/${this.props.match.params.id}`)

4. 상세 페이지 진입

  • CompanyDetailPage.js

👉 2가지 방법 사용 경우

  • String parameters
    • 해당 페이지에서 여러 정보가 필요한 경우
    • Query parameters가 유지 보수에 안 좋다고 판단할 경우
      • routes.js 수정 필요해서
    • 필터링 필요
  • Query parameters
    • 1개만 필요한 경우
      • 특정한 resource를 식별하고 싶은 경우
        /users // 사용자 전체의 목록을 가져온다.
        /users/123 // id 값이 123인 사용자를 가져온다.
        /users?job=programer // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.

참고

profile
°˖✧ Dreams come true ✧˖°

관심 있을 만한 포스트

2개의 댓글

comment-user-thumbnail
2021년 2월 28일

노력의 아이콘 의지의 아이콘 끈질김의 아이콘 = kate jung !!

1개의 답글