TIL no.33 - Styled Components : React

SASS 가 익숙해질 때 쯤 새로운 기술을 배워줘야 배움이 가중되는 법이죠.

처음 배울 때는 왜 이걸 배워야 하나 그냥 하던 거 하고 싶다는 생각이 더 들었는데

쓰다보니까 역시 처음은 뭐든지 어렵고 최근 기술은 편리합니다.

 Styled Components를 사용해야 하는 이유 

🌟클래스 명을 겹치지 않게 하기 위해서

🌟 funtional Component 와 함께 사용하며 동적인 변화를 표현할 수 있기 때문에

🌟 npm 다운로드 수 기준으로 현재 가장 인기 있는 css-in-js 로 사용자가 많기 때문

 

 

 npm install --save styled-components 

 

import styled from 'styled-components'


function HelloWorld() {
render(
	<Container>
    		<Title>Hello World!</Title>
    	</Container>
);
}

export default HelloWorld;

const Container = styled.div`
	padding: 20px;
    background-color: yellow;
`;

const Title = styled.h1`
	color: red;
`;

 

 

위의 코드와 같이 스타일을 변수로 설정해 사용하는 것을 styled components라고 합니다.

 

그런데 여기까지만 본다면 그냥 쓰면 되는 걸 굳이 익숙한 걸 버리면서까지 해야하나 싶을 수도 있습니다.

저도 그렇게 생각했지만 props 값을 받아서 동적으로 style을 변화시킬 수 있다는 것에서 편리함을 느꼈습니다.

 

render(
	<div>
    		<Button>Hi there</Button>
        	<Button point width="200">This</Button>
   	 </div>
);

const Button = styled.button`

	background: ${props => props.width < 200 ? "blue" : "red"};
    color: ${props => props.point ? "red" : "blue"};
    font-size: 20px;
    border: black 1px solid;
    
`;

위 코드에서처럼 변수로 설정해준 태그에 props 값을 주고 그에 따르게 다른 스타일을 줄 수 있습니다.

 

이미 지정한 변수에서 스타일을 조금만 더 추가한 태그를 추가하고 싶을 때는

const NewButton = styled(Button)`
	width: 3000px;
`;

이와 같이 할 수 있습니다.