[React] 다른 링크로 이동했는데 페이지가 재렌더링돼서 state가 초기화 될 때

문제의 소스코드 : 

       <Navbar bg="primary" variant="dark">
         <Container>
           <Navbar.Brand href="/">ShoeShop</Navbar.Brand>
           <Nav className="me-auto">
             <Nav.Link href="/cart">Cart</Nav.Link>
             <Nav.Link href="/event">EVENT</Nav.Link>
           </Nav>
         </Container>
       </Navbar>

부트스트랩의 nav를 그대로 붙혀와서 링크만 지정해놓았다.

 

수정 :

<Link to="/cart" className="nav-link">Cart</Link>

a태그는 페이지를 재렌더링하게되고, Link 태그로 감싸면 페이지가 재렌더링하지 않기 때문에 다른 링크로 이동하여도 state가 그대로 남아있다.