StyledComponents로 리액트 스타일도 컴포넌트로 만들기

최근 공부를 하다가 

Styled Components라는 것을 알게 되었다.

직접 사용해보고 적용해보니 

리액트에서 스타일을 다른 파일로 따로 지정해서 사용하는 것보다

편리하고 파일도 간소화되는 것 같았다.

리액트에서 기능들을 컴포넌트로 관리할 때도 좋은 것 같았다.

사용법도 아주 쉽게 되어있어 편리할 것 같다.

 

https://styled-components.com/docs

styled-components: Documentation

 

1. 일단 터미널에 인스톨 해준다.

npm install styled-components

 

인스톨이 끝나면 pakage.json에 가서 설치가 잘 되어있는지 확인한다.

아주 잘 설치가 되어있다.

 

2.스타일을 적용할 페이지로 간다.

상단에 styled를 import해서 불러와준다.

 

 

Nav라는 이름으로 지정했고

Nav라는 변수는 styled.nav로 nav라는 html요소를 사용할 것이다.

const 변수 이름 = styled.사용할 html요소 ` `

이렇게 해주면 된다.

그리고 `` 백틱을 사용해 백틱 안에 css 스타일을 해주면 된다.

 

상단에서 Logo는 a태그를 사용해서 백틱 안의 스타일을 적용할 것이다.

그리고 이걸 사용하려면 

return문 안에서 그냥 불러와주기만 하면 된다.

예시

반응형

const Header = () => {
	return(
        <Nav>
		<Logo />
            <Gamja>
            </Gamja>
        </Nav>
    )
};

const Nav = styled.nav``;
const Logo = styled.a``;
const Gamja = styled.div``;

 

매번 css파일을 따로 만들어서 스타일링을 해주는 것보다 

훨씬 훨씬 편하다.