동적 라우팅

참고링크: https://velog.io/@joonsikyang/React-Project-URL-parameters-Query-parameters

• spa에서 활용 필요

• 상세페이지 이동 시 활용

• 라우터에 연결되어 있는 component에서 this.props를 찍으면(react-router-dom의 객체인 history, match, location ) 가 나옴 => 그래서 로그인 페이지에서 페이지 이동할 때도 this.props.history.push로 이동한 것임

• URL 주소 뒤에 :id 자리에 입력하면, match 내의 params 값이 변경되는 것임(보통은 id를 적는 위치임) / :표시 뒤에 넣는 형식으로 변수를 입력해야 함(그래야 주소가 아닌것으로 인식)

• 상세페이지가 데이터를 받아올 연결된 부모 컴포넌트가 따로 없고, routes에 연결되어 있으므로, this.props.id가 아니라 this.props.match.params.id로 받아와야 함

• componentDidUpdate는 3가지(주로 2가지, prevProps와 prevState값)을 인자로 가짐
  이를 활용해서, id가 증가 or 감소할 때 마다 해당하는 데이터를 가져오기 위한 업데이트를 실행할 수 있음
  componentDidUpdate(prevProps, prevState, snapshot)

• query parameter로 페이지 이동하는 경우,
  url의 주소가 /company_list?category=3 인 경우
  this.props.location을 통해서 해당 주소의 정보를 가지고 올 수 있음

🧐 두 가지 방법을 각각 언제 사용하는게 좋을까?

URL parameters

해당 페이지에서 여러 정보가 필요한 경우
필터링을 하고 싶은 경우

Query parameters

특정한 resource를 식별하고 싶은 경우. 즉, 하나만 딱 필요한 경우

REST API

• RESTful API란?
  : 일종의 설계 방식, 방법
  :REST(REpresentational State Transfer)란, 웹에 존재하는 모든 자원(resorce, ex. 이미지, 동영상, 데이터)에 고유한 URI를 부여하여 자원에 대한 주소를 지정하는 방법론, 또는 규칙
  :RESTful API는 REST 특징을 지키면서 API를 제공한다는 의미
  :어떤 리소스를 어떻게 처리할지에 관한 것(URI, METHOD에 관한 것)
  :주소를 통해 통신하는 HTTP의 규칙에 있어서, 누구나 직관적으로 그 기능을 파악할 수 있도록 naming 등 형식을 정하는 것

• 기본규칙

1. 명사만 사용 (정확하게, 동사 x -> method에서 이미 행위를 규정하고 있기때문)
2. URI에는 method명이 들어가면 x
3. 리소스 사이에 상관관계가 있으면 '/'로 표시 (ex> GET /users/{id}/profile)
4. URI의 마지막에는 '/'사용 x
5. 불가피하게 URI가 길어지면 '-'를 사용 가능 ('_'는 사용 x)
6. URI에는 대문자사용 x, 파일 확장자 표시 x
   ...