1. Routing

하나의 웹페이지를 하나의 컴포넌트로 만들고 URL에 따라서 적절한 컴포넌트가 보이게 함

window.location.pathname으로 URL 뒤에 붙는 path를 가져와서 그에 맞는 컴포넌트를 렌더링하는 방식으로 구현할 수 있음

Window.location

• 객체가 연결된 장소(URL)을 표현하는 location 오브젝트에 접근

• host명, 도메인, 포트번호, path name 등을 가져올 수 있음

• location.pathname : URL / 뒷 부분 경로를 가져옴

추가로 찾아본 것

const pages : Record<string, React.FC> = {
  '/': HomePage,
  '/about': AboutPage,
};

export default function App() {
  const path = window.location.pathname;

  // const Page = pages[path] || HomePage;
  const Page = Reflect.get(pages, path) || HomePage;
  // ...

인덱스 시그니처와 Record

• 인덱스 시그니처 : 대괄호로 객체를 접근하는 방법

type humanInfo = {
  [name: string]: number
};

let human:humanInfo = {
  '홍길동': 20,
  '둘리': 30,
  '마이콜': 40
};

위의 예제는 Record Type으로도 작성 가능

type humanInfo = Record<string, number>

let human:humanInfo = {
  '홍길동': 20,
  '둘리': 30,
  '마이콜': 40
};

인덱스 시그니처는 문자열 리터럴을 Key로 사용하는 경우 오류가 발생하지만 Record Type은 Key로 문자열 리터럴을 허용

type humanInfo = {
  [name: '홍길동' | '둘리' | '마이콜']: number // Error
};

type names = '홍길동' | '둘리' | '마이콜';

type humanInfo = Record<names, number>

let human:humanInfo = {
  '홍길동': 20,
  '둘리': 30,
  '마이콜': 40
};

느낀점

리액트 라우터를 간단히 사용해본 적은 있으나 한번도 어떤식으로 URL에 따른 페이지를 보여주는지 생각해 본 적이 없었다. 이번 기회에 어렵지 않은 방법으로 해당 기능을 구현할 수 있다는 걸 알게 되었고, 단지 path에 맞는 컴포넌트를 조건부 렌더링 해줄 뿐인데 리액트 라우터라는 라이브러리를 쓰는 이유가 더 궁금해졌다. (1강 강의를 통해 유추할 수 있는 부분은 테스트의 용이성도 있을 것 같다.) 아마 이부분은 다음 강의에서 곧 알게될 것 같다.