React 복습 / Router / useParams

Router 란?

• Routing을 하는 라이브러리
• 리액트에서도 경로를 설계하고 지정하는 과정이 필요함. 예를 들어 사용자가 메뉴 안의 여러가지 화면이 숨어있는데 그 모든 페이지들의 흐름 관계임 어떤 메뉴를 누르면 어디로 들어가고.. 하는게 다 페이지 라우팅임
• 리액트는 SPA 이며 CSR(client Sid Rendering) 을 채택하고있음, CRS 은 처음 접속 시 HTML과 JS 를 함께 제공받기때문에 처음에는 느리지만 이후의 페이지 이동은 브라우저에서 교체하니까 훨씬 빠르다.

SPA(Single Page Application)에서 Page Routing

• • 마치 Page가 이동하는 것처럼 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것으로 실제는 적당한 컴포넌트가 배치 되도록 해줌

⇒ 이런 것을 도와주는 라이브러리가 React Router 임

React Router

• 서버로부터 신규 페이지를 불러오는 것이 아니라 각각의 URL에 의해 선택된 page를 하나의 페이지에서 렌더링 해주는 라이브러리
  => 마치 a 태그를 이용해서 페이지가 이동하는 것과 같은 느낌을 줌
• 사용자가 입력한 주소를 감지하는 역할을 하고, 다양한 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공 함

실습 Test

Test 01 ) 기존 방법으로 component 불러오기

• Home, Topics, Contact 를 import해서 태그로 출력해주면 바로 index.html 에 출력 된다.

Test 02 ) a 태그와 Router를 사용해서 component 페이징 해보기

• a태그를 사용해서 Router를 하면 페이징이 될 때마다 새로고침된다.
  

Test 03 ) Link 태그와 Router를 사용해서 component 페이징 해보기

• Link 태그를 사용해서 페이징을 하면 새로고침 되지 않고 리로드됨
• 리로드되기 때문에 콘솔창에 계속 콘솔이 쌓이고 있음을 확인할 수 있음

Test 04 ) NavLink 태그와 Router를 사용해서 component 페이징 해보기

• NavLink 태그는 호출된 대상의 클래스를 active형태로 바꿔준다.
  

그래서 만약 active 클래스의 배경값을 노란색으로 바꿔주면 유저가 클릭한 위치의 색상을 바꿔줄 수 있다.

Test05 ) useParams 를 활용해서 페이징 해보기

• 페이징에 앞서 라우팅 한 컴포넌트 안에서 또다시 라우팅을 할 경우 다음과 같은 수정이 필요하다. (Nested Routing : 중첩 라우팅)
  
• topics : "*" 을 붙여서 라우팅 안에서 또 라우팅이 있다는 것을 알려준다.

1. 다음과 같은 결과처럼 Topics의 HTML을 클릭하면 1 이라는 파라미터로 페이징 된다.

2. Topics 컴포넌트

• Topics 컴포넌트에서 map을 통해 "Home", "Topics", "Contact" 태그들을 출력한다.
• Routes 를 활용해서 Topic(Topics 아닙니다.) 컴포넌트를 호출한다.
  => 아래 5번부터 좀 더 자세하게 설명하겠다.

path의 값이 "/:topic_id" 인데 :(클론) 을 붙여서 쓰면 변수를 의미한다. Topic 컴포넌트 안에서 topic_id 라는 변수를 지정한 것음 알 수 있다.

4. Topic 컴포넌트의 데이터 객체 (contents)

• topic 안의 contents 객체 데이터이다.

5. Topics() 컴포넌트가 실행되면서 아래 부분을 map을 사용해서 출력한다.

=> map 을 사용하여 출력

• Routes 를 하면서 element 로 Topic 컴포넌트를 호출함 그리고 path 값으로 /:topic_id 를 주었는데 “:” 콜론이 존재하면 변수라는 의미임

6. Topic 컴포넌트(Topics 아님)에서 useParams 를 활용해 url 값을 가져와서 topic_id로 저장함

7. 없는 데이터 경우의 값을 미리 변수에 저장함

8. find_item 에 contents의 데이터 객체를 filter를 진행해서 useParam으로 가져온 topic_id 와 contents에 들어있는 id를 비교해서 같은 값만 삼항식으로 selected_item에 저장 함 (없을 경우 4번 미리 저장한 값을 반환함

⇒ 여기서 filter는 객체 배열을 하나씩 map처럼 돌리면서 true 인 값 (id가 서로 같은 값) 만 배열의 형태로 리턴함 그러니까 삼항식에 배열중 가장 앞의 값을 반환해서 seletec_item 에 저장하는 것임

9. 마지막으로 Topic의 return 으로 selected_item 의 객체 데이터를 출력 함

참고노션

https://www.notion.so/Router-009a4c47801645728d8a7b30edcc730d

git

https://github.com/winsam003/MyCode