프론트엔드 - 리액트 (Router, useParams, Link)

오늘은 react의 장점인  SinglePageApplication 을 만들기위해서 꼭 필요한 Router를 사용해보았다.

 

Router란 사용자가 입력한 주소를 감지하는 역활이다.

 

Router component에는 BrowserRouter 와 HashRouter가 존재한다.

 

BrowserRouter는 html이 지원하는 브라우저의 주소를 감지한다, HashRouter는 해시 주소를 감지한다.

 

router component는 npm install react-router-dom을로 설치가 가능하다.

 

코드에서는 App부분에 router를 적용해주었고, Router 안에 Routes 그 안에 Route로 정의가 가능하다.

 

function App() {

  // Router => Routes => Route path , element

  // Router는 브라우저를 불러오는 큰틀, Routes 한번에 하나의 브라우저를 불러오기위한 수단, Route우리가 불러올 브라우저

  return(

    <Router>

      <Routes>

        <Route path="/movie/:id" element={<Detail />}></Route>

      </Routes>

      <Routes>

        <Route path="/" element={<Home />} />

      </Routes>

    </Router>

    );

}

 Route안에는 path로 브라우저의 주소를 지정해줄수있고, element로 Component를 불러올수있다.

 

그리고 router를 사용할때 파리미터 정보를 가지고오고싶으면 useParams를 사용한다.

react-router-dom을 설치하면 useParams또한 사용할수있다.

 

const {id} = useParams();

먼저 파라미터를 설정해주고, 해당 파리미터를변수에 넣을수있다.

 

<div>

          {movies.map((movie)=>(

          <Movie

            key={movie.id}

            id={movie.id}

            medium_cover_image={movie.medium_cover_image}

            title={movie.title}

            summary={movie.summary}

            genres={movie.genres}/>))}

      </div>

이때 id의값은 movie의 아이디 값이므로 해당 주소에는 id번호가 들어가게된다.

 

또한 Link를 만들어서 해당 path주소로 이동해줄수 있는 기능이 있는데

 

<h2>

      <Link to={`/movie/${id}`}>{title}</Link>

 </h2>

해당 태그를 클릭하면 주소로 이동하게 되는 Link메소드가 존재한다. 여기에도 useParams인 id값이 사용되었다.

 

이 모든 것을 이용해서 react의 장점인 SinglePageApplication 이 구현 가능하다.

 

이렇게 react에 사용되는 useState, useEffect, Props, Router, useParams, Link, Component... 것들을 배워보았다.

 

모든것은 JavaScript에서 파생되기 때문에 react도 중요하지만 JavaScript의 기본기 또한 중요한것같다.

 

JavaScript를 꾸준히 이벤트 리스너등 문법들을 잘 숙지하고 이것들을 녹아내서 react에 잘 사용해야 할 것 같다.

 

이제부터는 react를 사용한 그리고 html, css, JavaScript를 사용해서 SinglePageApplication  구현 해 볼 것이다.