React 기초 )) styled component 기본기(SCSS사용하기)

1. tag example

//Button 컴포넌트의 스타일을 지정해주는 코드
const Button = styled.button`
	font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    background: palevioletred;
    color: white;
`

function App() {
	return <Button>SampleButton</Button>
}

2. props example

const Button = styled.button`
	font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    //props의 primary 여부에 따라 색깔 지정
    background: ${props => props.primary ? "palevioletred" : "white"}; 
    color: ${props => props.primary ? "white" : "palevioletred"};
`

function App() {
	return(
    	<Button>Normal Button</Button>  //props가 없는 태그
    	<Button primary>Primary Button</Button>  //primary는 props!! primary={true} 와 똑같음.
    ) 
}

3. styled component에서는 기본적으로 scss문법을 지원한다.

• scss에서는 선택자 중복 회피 가능하다.
• 이외에도 scss variable 등 여러 추가 기능이 가능하다.

[ css문법 => 중복 제거 불가능]

 //name과 red 클래스를 동시에 가진 경우
.name.red {
    color: red;
}
//name클래스를 가지고 blue클래스를 가진 자식컴포넌트를 가진 경우
.name .blue { 
    color: blue;
}
.name .green {
    color: green;
}
.name .child .yellow {
    color: yellow;
}
//인접요소 연산자. name 클래스 컴포넌트 옆에 name클래스 컴포넌트가 있는 경우 두번째 컴포넌트에 CSS 적용
.name + .name { //인접
    color: purple;
}

[scss 문법 =>  중복 제거 가능]

.name{
	&.red{
    	color: red;
    }
    
   .blue{
   		color: blue;
    }
    
    .green{
    	color: green;
    }
    .child{
    	.yellow{
        	color: yellow;
        }
    }
    + .name {
    	color: purple;
    }
}