TIL_21 | React Routing

카테고리 없음

TIL_21 | React Routing

일렁이는코드 2021. 11. 7. 22:06

Routing
동적 라우팅 (Dynamic Routing)

Routing

라우팅이란 다른 경로 (url주소)에 따라 다른 view(화면)을 보여주는 것을 뜻합니다. React는 SPA(Single Page Application) 단일 페이지 애플리케이션의 기술을 사용합니다. 즉, 페이지 전체를 새로고침하는 것이 아닌 페이지 뷰를 단일 페이지에서 동적으로 그린다고 생각하면 됩니다.

다음은 react-router-dom을 사용한 라우팅에 필요한 기본적인 코드 구조 입니다.

// index.html
<!DOCTYPE html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

// index.js
ReactDOM.render(<Routes />, document.getElementById("root"));

// Routes.js
const Routes = () => {
  return (
    <Router>
    <Nav />
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/users" component={Users} />
        <Route exact path="/products" component={Products} />
        <Route path="*" component={NotFound} />
      </Switch>
     <Footer />
    </Router>
  );
};

index.html : React 페이지 로드 시 가장 먼저 호출되는 영역입니다.
index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할을 합니다.
Routes.js : React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정하는 역할을 합니다.
Route path="*" : 위의 기본적으로 설정한 경로 이외의 모든 페이지를 설정할 때 사용합니다. (404페이지)

동적 라우팅 (Dynamic Routing)

기본적인 라우팅 방법으로는 완전히 정해진 경우에 대해서만 경로를 표현할 수 있었습니다. url 마지막에 특정 id 값에 따라 서로 다른 상세페이지 정보를 화면에 그려지게 한다면 id를 변수처럼 다뤄야 할 필요성이 생기게 됩니다. 이처럼 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적 라우팅 이라고 합니다.

동적인 경로를 처리할 수 있는 방법으로 Path Parameter와 Query Parameter이 있습니다.

Path Parameter

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

라우트 경로 끝에 들어가는 각기 다른 id값들을 저장하는 매개 변수를 Path Parameter라고 합니다. (2, 45, 125)

Path Parameter는 Routes 컴포넌트에서 다음과 같이 정의됩니다.

<Router>
	<Switch>
		<Route exact path='/product/:id' component={productDetail} />
	</Switch>
</Router>

: 는 Path Parameter가 올 것임을 의미 하며 id는 해당 Path Parameter의 이름을 지정할 수 있습니다.

Query Parameter

//before
"/search?keyword=자바스크립트": <Search keyword="자바스크립트" />
"/search?keyword=리액트"    : <Search keyword="리액트" />
"/search?keyword=라우팅"    : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA"     : <Search keyword="SPA" />

//after
"/search?keyword=something" : <Search /> // this.props.location.search

<Route path ="*" component={NotFound} />
404 페이지를 구현하는 방법입니다.

저작자표시 비영리