개발일기

Route exact와 Switch의 간단 정리 위의 소스코드를 바탕으로 경로를 / 로 이동할 경우 Main, Water, Juice 컴포넌트 3개가 전부 렌더링된다. Route는 경로가 부분적으로 일치하는 컴포넌트도 렌더링하는 특성을 가지고 있기 때문이다. 의도치 않은 렌더링을 위해 exact를 사용한다. / 경로로 이동할 경우 Main컴포넌트만, /water 경로로 이동할 경우 Water 컴포넌트만, /juice 경로로 이동할 경우 Juice 컴포넌트만 렌더링되게 된다. 즉, 경로가 완벽히 일치하는 컴포넌트만 렌더링 하게된다.

1. react-router-dom 설치 npm install react-router-dom yarn add react-router-dom React에서 route기능을 사용하려면 우선적으로 react-router-dom을 설치해야 한다. 2. import 부분 import { Route, Router, Switch, Link } from 'react-router-dom'; 라우트 기능을 사용할 때 많이 사용되는 4가지 모듈을 불러온다. Route path : 주소창의 경로를 지정한다. exact : 주소창의 경로와 완벽하게 일치할 때, 이 라우트의 컴포넌트를 보여준다는 의미한다. component : 보여줄 컴포넌트를 의미한다. Route 컴포넌트는 path옵션을 통해 주소창의 주소와 일치하는 컴포넌트..