:css-in-js: 자바스크립트 코드로 css를 만들어내는 방식이다.
꾸미고자 하는 스타일일을 styled component로 만들고,
안에 스타일을 작성하는 방식으로 만든다.
장점: props를 활용하여 조건부 스타일링을 할 수 있다.
css에서 사용할 수 없었던 if, switch, 삼항연산자 등을 사용할 수 있다.
기본코드
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid black;
`;
function App() {
return <StBox>박스</StBox>;
}
함수 밖에서 const로 변수명을 선언하고, 그 변수안에 styled를 적은 뒤
. 뒤에는 html형식이 온다. html형식 뒤에는 문자열을 넣을거기 때문에 백틱이 와야하고, 그 문자열은 css 형식 그대로 작성된다.
이렇게 styled component를 다 만들었으면 함수 안 return 값에 태그 대신 만들어진 컴포넌트를 넣는다.
조건부 스타일링
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
background-color: ${(props) => props.backgroundColor};
`;
function App() {
return (
<>
<StBox borderColor="red" backgroundColor="lightgray">
박스
</StBox>
<StBox borderColor="blue">박스</StBox>
<StBox borderColor="black">박스</StBox>
</>
);
}
박스가 여러개 생기는데, 그 박스들을 조건에 따라 스타일링을 적용하고 싶다면, 각각 className이란 css를 넣지 않고 styled component를 이용할 수 있다.
부모가 자식에게 값을 전달하기 위해 borderColor라는 데이터를 전달하고,
자식인 styled component에 변하는 자바스크립트, 함수 형태로 넣어준다.
${(props) => props.borderColor} props를 받아 그 중에서 borderClor적용
const StContainer = styled.div`
display: flex;
`;
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
`;
//박스의 색 모음
const boxList = ["red", "blue", "black", "b"];
//색을 넣으면 이를 반환하도록 동작하는 함수
const getBoxName = (color) => {
switch (color) {
case "red":
return "빨간 박스";
case "blue":
return "파란 박스";
case "black":
return "검은 박스";
default:
return "? 박스";
}
};
function App() {
return (
<>
<StContainer>
{boxList.map((box) => {
return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
})}
</StContainer>
</>
);
}
Stbox 컴포넌트를 만들고 그 컴포넌트는 return값에 들어가는 자식이다.
따라서 props를 받을 수 있기 때문에 값을 받아와 props를 활용한다.
우리는 똑같은 박스들을 만들거고, 그 박스들의 색만 변하면 되기에
초기 코드처럼 박스를 포함한 태그를 늘려가면 복잡해지기만 한다.
따라서 이때 switch를 활용한다!
먼저 색의 성질이 들어간 boxList 배열을 만든다.
그리고 색을 넣으면 그 색에 따라 결과를 반환해주는 getBoxName함수를 만든다.
그 박스 안에 switch구문을 활용하여 case가 'red'라면 : return '빨간박스'를 반환하도록 한다. 그리고 값이 없다면 default값을 마지막에 넣어준다.
따라서 마지막에 추가한 'b'의 경우 default값에 의해 ?박스로 출력되게 된다.
그리고 return 구문에서 boxList배열에 대한 map을 돌리고,
그 return값으로 StBox컴포넌트를 넣는다. 컴포넌트 값에는 props로 전달한 borderColor를 그대로 넣어주고 그 값을 boxList에서 돌린 item으로 넣어준다.
그리고 구문은 getBoxName함수를 실행시켜 나온 값을 넣도록 하고, 그 파라미터는 itm이다.
:전역 스타일링. styled-components는 해당 컴포넌트 내에서만 사용할 수 있지만,
globalstyle은 프로젝트 전체를 아우르는 스타일이다.
기본코드
const GlobalStyle = createGlobalStyle`
body{
font-family: 'Arial';
font-weight: 900;
}
`;
body밑으로 다 이 스타일을 적용하겠다는 의미로 백틱 안에 body를 넣어준다.
:css는 웹 프로젝트 규모가 커질수록 복잡해지고, 유지보수도 불편해진다.
human error를 줄이려는 노력을 위해 생긴 것!
코드의 재사용성을 높이고 가독성을 향상시켜줄 수 있는 방법이다.
특징
:기본적으로 css 스타일을 주지 않아도 태그마다 자동 적용되어 있는 default style을 제거하는 방식이다.
구글에 remove css 이런식으로 검색하면 양식이 나오는데 reset.css 파일을 만들고
index.js에 import하면 자동적으로 적용된 css를 없애준다.