7주차 일요일 - react router dom, useParams

7주차 일요일 - react router dom, useParams

1. 배운 것

• react-router-dom 복습 + 추가학습
  • react router dom Route의 동적 경로 지정 - 세미콜론, useParams Hook
  • 빈 페이지 컴포넌트를 만드는 이유

2. 내용 정리

React-router-dom

<Routes>
	<Route path="/" element={<Home />} />
</Routes>

• 6버젼: Routes 와 각 Route의 path 지정과 element 속성으로 기존 Switch 안에서 exact path 지정을 대체하여 훨씬 간편해졌다.
• HashRouter (경로에 # 이 들어간 것.) 사용 가능. 사용하려면 BrowserRouter 위치에 쓴다. (나중에 필요할 때 추가 공부하기)
• a태그 href 대신 <Link to="경로"> 사용하여 새로고침 없이 재렌더링.
  • a태그 사용 시 onClick 이벤트에 핸들러함수 별도 지정 불가능. 경로 이동만 됨.
• Link 대신 NavLink 사용 시 선택된 navigation 메뉴의 요소에 동적으로 active 클래스가 생성되어 선택된 nav menu 요소만 스타일링 줄 수 있음. 제어문으로 기본값 className인 active를 원하는 값으로 변경해줄 수도 있다. (나중에 필요할 때 추가 공부하기)
• 잘못된 경로로 접근할 경우 보여질 빈 페이지를 지정해주어 대응시킨다.
  • • : 모든 경로. path 속성을 *로 준 Route 컴포넌트는 다른 Route들 위에 있어선 안된다. 가장 아래에 있어야 다른 Route의 path를 덮어씌우지 않는다.

// 빈 페이지 컴포넌트 생성

import { Link } from 'react-router-dom';

export default function EmptyPage() {
  return (
    <>
      <h2>잘못된 접근입니다.</h2>
      <Link to="/">돌아가기</Link>
    </>
  );
}

// 빈 잘못된 경로 접근시 보여질 페이지 경로 설정

<Routes>
  <Route path="*" element={<EmptyPage />} />
</Routes>

React-router-dom - useParams Hook 으로 동적인 경로 처리

• 경로에 변수를 사용하여 하나의 경로에서 경로를 계속 변경시켜줄수 있음.
• 데이터인 JSON 파일의 각 요소 인덱스에 맞게 다른 경로로 보내주기 위해 아래 예제에서는 filter 메서드 안에서 useParams의 값을 숫자로 형변환시켜 사용함.
• 사용법
  1. import해오기
  2. useParams 호출: 주의: 반환값은 string 타입이다. 숫자로 사용하려면 형변환할것.
  3. Route의 path 와 Link의 to 경로 수정

import dummy from '../database/data.json';
	// 1. import 해오기
import { useParams } from 'react-router-dom';

export default function Day() {
	// 2. useParams 호출
  const { day } = useParams();
	// const day = useParams().day;를 객체 디스트럭쳐링으로 변경함.

  const wordList = dummy.words.filter(word => word.day === Number(day)); // Number(day) 로 반환값 숫자타입으로 형변환.

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map(word => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

// 3. ':변수명'으로 Route와 Link 경로 수정

// Route (App컴포넌트 내부)
<Route path="/day/:day" element={<Day />} />

// Link (자식 컴포넌트 내부)
<Link to={`/day/${days.day}`}>Day {days.day}</Link>

참고 자료

- 코딩앙마님 유튜브 리액트 강의
- 리액트 라우터 사용방법

3. 리뷰

3.1 좋았던 점

• 연습용 앱에 express 서버 붙여봤다.

3.2 아쉬웠던 점

• 그냥 진짜 붙이기만 했다. ajax 예습하고 싶었는데 못했다.

3.3 notes

티스토리에서 md파일 인라인 코드블록이 안먹어서, 또 다른 자잘한 문제로 글이 영 보기 안이쁘다.
벨로그로 다시 갈아타야 하나 고민이다. 티스토리를 갈아엎자니 시간이 없고.
여태 불렛포인트를 너무 남발했던것 같다. 마크다운 작성시 불렛포인트를 줄여야 겠다.
벨로그 글들 보다 내 글 보니 아무리 나만 보면 되는 Til이어도 너무 가독성이 안좋더라.
딥다이브 책 너무 어렵다.

4. 할 일

• useEffect 공부
• 값이 두번 찍히는 이유(stopPropagation)
• key 값으로 적절한 값