styled-components

styled-components

• 설치

$ npm i styled-components

• 사용방법

원하는 태그의 스타일을 변수와 함께 선언해주고

import styled from  'styled-components'

const List = styled.ul`
	display:flex;
	&:hover{
		background-color:blue
	}

`

스타일을 선언해준 변수로 태그를 지정해준다.

<List>
	<li>
		<a  href="/">Moives</a>
	</li>
</List>

Link

• Link태그를 이용하면 자바스크립트 방식으로 이동하게 해준다.
• styled-components를 지정할때 a태그가 아닌 Link태그로 지정하고 싶다면 아래와 같이 해주도록 한다.

const SLink = styled(Link)``

GlobalStyles and Header

• styled-reset 설치

$ npm i styled-reset

• 사용법

Components/GlobalStyles.js

import { createGlobalStyle } from  'styled-components';
import reset from  'styled-reset';

const globalStyles = createGlobalStyle`
	//...
`

App.js

class  App  extends  Component {
	render() {
		return (
			<>
				<Router/>
				<GlobalStyles  />
			</>
		);
	}
}

Location Aware Header

styled-component props

<Item current={pathname === '/'} >

border-bottom:5px  solid  ${props  =>  props.current  ?  '#e74c3c'  :  'transparent'  };

withRouter

• withRouter란 다른 컴포넌트를 감싸는 컴포넌트
• Router에 정보를 전달함
• 라우트 컴포넌트가 아닌 곳에서 match/location/history 같은 라우터 정보를 불러와야할때 사용한다.

import { Link, withRouter } from  'react-router-dom';

const MainHeader = (props) => {
	//..
};

export  default  withRouter(MainHeader);

• export하는 것은 다른 컴포넌트가 안에 있는 withRouter
• Header가 withRouter라는 컴포넌트를 감싼 형태이기 때문에 props를 가질 수 있다.

출처

• 초보를 위한 React JS