react - switch

기본적인 라우터

라우터는 와 를 통해서 라우팅을 구현하는 방식이다.
이를 구현할때 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다.
**하지만 여기서의 문제점은, 홈페이지에 들어갔을때 컴포넌트가 3개면 3개모두 렌더링된다.

그래서 정확한 경로를 사용해야한다.!
=>exact path를 사용하여 정확히 일치하는 URL의 컴포넌트를 렌더링시키는 방법을 사용한다.

return(





);

이런식으로 해결할 수 있고, 3가지 컴포넌트가 각자의 URL에 렌더링이 된다.

Switch의 등장

  Switch 란 첫번째로 매칭되는 path를 가진 컴포넌트를 렌더링 시킨다.
  이것이 exact path와 다른 점은 첫번째 매칭만 본다는 것이다.
  
  return(

); 이렇게 Route를 Switch로 감싸준다. 이 특성을 통해서 라우팅 시스템을 구현할 때, 적절히 와 를 섞어서 쓰면 훨씬 체계 적으로 구현할 수 있을 것이다. 또한 path 와 exact path 의 차이점을 확실하게 알고 사용하도록 하자.