React Router (2) 썸네일형 리스트형 3-6. 현재 위치에 특정 스타일 넣기 (withRouter 사용하기) 현재 위치에 특정 스타일 넣기 - withRouter 사용하기 Header의 메뉴 중 현재 선택된 메뉴에만 다른 css를 적용하고 싶다! react-router-dom 의 withRouter를 활용해보자! withRouter는 컴포넌트를 감싸는 형태로 사용하고, Router에 대한 정보를 감싼 컴포넌트에 전달해준다! 기존의 작성했던 Header 컴포넌트에 withRouter를 적용한 모습이다! export default withRouter((props) => ( {...생략} )); withRouter로 전달받을 수 있는 props를 확인하고 활용하기 위해 Header 컴포넌트 내에서 console.log(props)를 통해 withRouter의 props를 출력해보면 아래 이미지와 같다 Header 컴.. 2-1. React Router React Router router 기능 사용을 위해 react-router-dom 설치 yarn add react-router-dom npm install react-router-dom https://www.npmjs.com/package/react-router-dom Hash Router / Browser Router 대표적으로 두가지 방식의 라우터가 있다. 가장 기본적인 라우터 설정을 예시로 알아보자 Router.js import React from "react"; import { HashRouter as Router, Route } from 'react-router-dom'; import Home from "../Router/Home"; // 보여줄 컴포넌트와 그 경로 export default .. 이전 1 다음
