[trip planner 프로젝트] 3. router와 styled-components

Router

router는 특정 url에 페이지를 제공하는 방식입니다.

1. 설치

npm install --save react-router

2. 사용방법

<Route path="/" component={Home} exact={true} />
<Route path="/about" component={About} />

* exact = 이하 경로를 중복 출력하지 않도록한다.

* switch  = /일때, /하위 경로일때 모두 화면에 출력되지 않도록 한다.

 

 

Styled-componets

styled-componets는 react 요소에 css를 입혀주는 프레임워크입니다.

처음에 css를 1페이지에 1개만 사용하게끔하려했지만, 모든 리액트 페이지에서 css를 공유해서 알아보다가 발견한 프레임워크입니다. 현업에서는 자주 사용하는 프레임워크라고 합니다.

 

1. 설치

$ npm install styled-components

2. 사용방법

import styled from "styled-components";

const TestDiv = styled.div` // 여기서는 div 태그
	css 양식
`;


const Test = () => {
	return (
    	<TestDiv>Test</TestDiv>
    );
}