0strich

react-router-dom의 useParams hook을 사용해서 하나의 컴포넌트에서 전달받은 URL Parameter를 사용해서 적용시켜 보자 다음은 useParams를 사용하는 예제이다. App.js import React from "react"; import { BrowserRouter, Switch, Route, Redirect, useHistory, useParams, } from "react-router-dom"; // App 컴포넌트 const App = () => { return ( Resume {/* Buttons 컴포넌트 */} {/* 라우팅 */} } /> ); }; // useHistory 를 사용하는 Buttons 컴포넌트 const Buttons = () => { const ..

react-router-dom의 hooks를 사용하여 경로를 설정해보자 사용할 hooks는 useHistory이다. 이전 글에서 사용한 예제에서 링크를 버튼으로 만든 뒤, onClick 이벤트를 걸어서 경로를 변경시킬 것이다. 이번에도 간단한 예제이므로 하나의 파일에서 작성해 보자 App.js import React from "react"; import { BrowserRouter, Switch, Route, Redirect, useHistory, } from "react-router-dom"; // App 컴포넌트 const App = () => { return ( Resume {/* Buttons 컴포넌트 */} {/* 라우팅 */} } /> ); }; // useHistory 를 사용하는 Butto..

개발을 진행하면서 만들어지는 수많은 페이지들을 효율적으로 관리하는 방법에 대해 알아보자 이번 글에서는 react-router-dom을 사용한 Basic Routing을 해 볼 것이다. 예제는 링크를 사용한 간한단 이력서 폼이다. 간단한 예제이므로 파일을 따로 구분하지 않고 하나의 파일에서 작성해 보자 react-router-dom에서 사용할 컴포넌트는 다음과 같다 ① BrowserRouter ② Route ③ Switch ④ Link ⑤ Reidrect App.js import React from "react"; import { BrowserRouter, Link, Switch, Route, Redirect } from "react-router-dom"; // App 컴포넌트 const App = () ..