TIL 21일차

React Twittler SPA과제를 다시 해보았다. 'MyPage 컴포넌트의 자식 컴포넌트로 Footer 컴포넌트가 있어야 합니다.' 라는 문제를 해결하기위해 해당하는 위치에 <Footer />을 추가했지만 계속 오류가 났다. 알고 보니 import로 Footer컴포넌트를 불러오지 않은것다. 계속 고민하다 발견했기에 이 경험을 통해 앞으로는 컴포넌트를 불러올때 import로도 불러왔는지 다시 한번 확인하게 될 것 같다. 

 

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about"> {/* 경로를 설정하고 */}
            <MyPage /> {/* 컴포넌트를 연결합니다. */}
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

export default App;

Home 컴포넌트 Route 에만 존재하는 exact 는 언제 쓰는걸까?

React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여준다.

exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을 한다. 

 

exact 속성을 쓰지 않고도 페이지가 전환되는 것은 왜 그런 것일까?

<Switch> 를 사용하여 exact 역할을 대신 해주는 경우다. 하지만 <Switch>는 순서와 위치가 중요한데 위에서 아래로 경로를 하나씩 검사하면서 해당 경로에 해당하는 라우트를 실행시키기 때문이다. 이런 경우, 비교할 라우트를 더 상단에 작성해야만 한다.  위의 예제처럼 Home을 위에 둔 상태에서 exact없이 활용한다면 중복되는 경로로 인해 다른 라우트로의 이동이 불가능하게 된다. 이를 해결하기 위해 exact를 사용할 수 있습니다.

 

 

추가로 공부하자 😊

• React Twittler SPA과제 다시 한번 풀어보기. 어제보단 더 빨리 풀 수 있지 않을까? 
• 얕은 복사와 깊은 복사에 대해 노션에 정리해보자.