11.07.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-1 챕터리뷰

[ 새롭게 알게 된 것 ]

---

1. react-router-dom은 별도의 버전 없이 의존성을 추가하면 6버전으로 추가됨

---

벨로퍼트 책자에는 버전 5로 설명되어 있어서 라우터 구현이 처음엔 안되었음

버전5 라우터

버전6 라우터

리액트 라우터 돔 버전에 따른 차이를 알게됨

---

 

2. 메인페이지와 라우터가 겹칠땐 exact라는 props를 할당해주면 됨

---

props 값은 true 초기화해주면됨.

이러면 경로가 완벽히 똑같을때만 보여주게 되므로 규칙이 불명확했던 이슈를 해결 할 수 있게됨

const App = () => {
  return (
    <div>
      <Route path="/" exact={true} component={Home} />
    </div>
   );
}

 

---

 

3. 클릭하면 다른 주소로 이동시키는 컴포넌트 Link 사용법을 알게됨

---

쌩 JS로 라우터를 사용하려면 a태그를 그냥 사용하면 안됨. 

a태그는 페이지를 이동시키면서 모든 컴포넌트를 리렌더링 시키기 때문에 불필요한 컴포넌트까지 리렌더링되는 비효율적인 속성이 있음.

이럴땐 e.defaultprevent()를 함께 사용해줘도 되긴함.

굳이 불편하게 처리할 필요없이 불필요한 리렌더링을 예방하고 페이지 주소만 바꿀뿐 페이지를 새롭게 불러오지 않는 Link가 유용함.

HTML5 History API  를 사용하는 컴포넌트가 바로 Link임.

사용방법은 아래와 같음.

react-router-dom 버전 6 Link 사용법

---