[React JS 마스터클래스] Styled Commponent

Hyeseong·2022년 3월 15일
0

react-js-masterclass

목록 보기
1/4

🪓 styled-components

🚩 styled-components가 필요한 이유

아래 코드를 보면 중복되고 직관적이지 않은 부분이 너무 많습니다.
그렇기에 styled-components가 필요합니다.

import styled from 'styled-components';

function App(){
  return (
    <div style={{ display: "flex" }}>
    	<div style={{ backgroundColr: "teal", width:100, height:100 }}></div>
    	<div style={{ backgroundColr: "tomato", width:100, height:100 }}></div>
	</div>
	);
}

export default App;

🚩 Case1 - First Styled Components

# 생략

const Father = styled.div`
	display: flex;
`

const BoxOne = styled.div`
	backgroundColr: "teal";
	width:100; 
	height:100;
`

const BoxTwo = styled.div`
	backgroundColr: "tomato";
	width:100; 
	height:100;
`

const Text = styled.span`
	color: white;
`

function App(){
  return (
    <Father>
		<BoxOne >
    		<Text>Hello</Text>
    	</BoxOne>
    	<BoxTwo />
	</Father>
	);
}

# 생략

구현 부분을 보는 것만으로도 편안하고 직관적인것을 알 수 있습니다.
규칙은 간단합니다.
sytled를 임포트하고 도트 연산자를 이용해서 html 태그 이름을 명시하고 이후 백틱을 이용하여 css문법을 적용합니다.

profile
어제보다 오늘 그리고 오늘 보다 내일...

0개의 댓글