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