13 스터디 퀴즈 [리액트 라우터로 SPA 개발하기]

[EYEG]

react router v5에선

• Route에 연결할 컴포넌트를 인라인으로 작성하는 방법과
• 자식으로 작성하는 방법

2가지가 있다.

인라인으로 작성하면 연결된 path로 이동할 때마다 컴포넌트가 다시 렌더링 되지만,
자식으로 작성하면 한 번 렌더링 됐던 컴포넌트를 재사용할 수 있습니다.

그러나

react router v6에서는 오로지 인라인으로만 작성 가능합니다. 이 경우 컴포넌트가 다시 렌더링 되는 것인데, 만약 그렇다면 react router v5처럼 한 번 렌더링한 컴포넌트를 재사용할 수 있는 방법은?

[seokhj]

// 1. 문제
<Route path='/' element={<Main/>}>
   <Route path='/article1' element={<Article1/>}/>
   <Route path='/article2' element={<Article2/>}/>
   <Route path='/article3' element={<Article3/>}/>
//2.문제
<Route path='*' element={<Notice/>} />

1. 문제 : path='/' 는 어디로 이동하는것이며, Article1,2,3 페이지에 들어갔을 때 공통으로 보이는 컴포넌트는 무엇일까요?

2. 문제: path='*' 는 어떤 조건을 가지고 있을까요?

[ohr0226]

Link, useNavigate, Navigate 의 차이점은?

정답

Link : 일반적으로 경로 이동 시 사용
useNavigate : 웹 페이지 이동 시 추가적인 로직이 필요한 경우에 사용
Navigate : 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용

[andrewylies]

Q. 다음이 설명하는 리액트 라우터의 기능은?

• 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용 하는 컴포넌트
• ex. 사용자의 로그인이 필요한 페이지인데 로그인을 하지 않을경우 로그인 페이지로 이동시킬수 있는 기능

A. NavLink B. Navigate C. useNavigate D. useLocation E. useParams

---

정답

### B. Navigate

[cheesepizza453]

( ? )은 React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트다. 부모 라우터에 지정된 컴포넌트에서 자식 라우터에 지정된 컴포넌트를 렌더링할 때 사용된다.