본 글은 Styled-components를 처음 접하는 팀원들을 위해 작성한 글입니다.
휘발하기에 아까워서 처음 접하는 분들을 위해 블로그 글을 남깁니다.
노션 링크에서 보면 더 보기 쉽습니다!
https://vigorous-grenadilla-5b8.notion.site/styled-components-9293e6cef2344bea830e620ce68ec163?pvs=4
0. 맛보기
기존의 css 코딩 방식
index.html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box1">Box1</div>
</body>
</html>
style.css파일
.box1 {
width: 300px;
height: 300px;
border: 1px solid red;
background-color: red;
}
기존의 css스타일링은
태그에 클래스명(또는 id)을 지정해서
선택자 . # 을 통해서 스타일링을 했다.
<div class="box1">Box1</div>
box1이라는 클래스를 지정해서
css파일에서 .box1{} 이런 식으로 원하는 스타일 코드를 집어넣었었다.
이 코드를 그대로 styled-components 방식의 코드로 바꿔보자.
스타일드 컴포넌트 방식
import styled from "styled-components";
const MyBox = styled.div`
width: 300px;
height: 300px;
border: 1px solid red;
background-color: red;
`;
const App = () => {
<MyBox></MyBox>
}
코드가 해괴해 보이시나요?
겁먹지 마세요. 정상입니다.
하지만 막상 사용하면 별것 없습니다.
차근차근 살펴보죠.
1. 스타일드 컴포넌트
기본 문법은 이런 형식입니다.
styled.(지정하고싶은 태그 이름)`
//넣고 싶은 스타일링
`;
우리는 div태그를 만들고 싶고 그 안에 스타일을 지정하고 싶습니다.
그렇다면 어떻게 하면 될까요?
styled.div`
width: 300px;
height: 300px;
border: 1px solid red;
background-color: red;
`;
이렇게 만들면 됩니다.
다른 예를 들어서 살펴보죠.
button 태그를 만들고 싶고
그 안에 위와 똑같은 스타일을 지정하고 싶다면 어떻게 해야할까요?
styled.button`
width: 300px;
height: 300px;
border: 1px solid red;
background-color: red;
`;
이렇게 하면 됩니다.
살짝 감이 오시나요?
styled 라는 단어를 입력 후 . 입력 그 다음 넣고 싶은 태그 이름을 넣는 것입니다.
그 다음 ` 가 나옵니다.
이것을 사용하는 이유는 템플릿 리터럴을 사용하기 위해서 입니다.
자세한 원리를 알고 싶다면 구글링 혹은 질문!
2. 프로젝트 시작
일단 styled components를 사용하려면
0 . 설치를 해야합니다.
하지만 우리 프로젝트에는 이미 설치가 되어있으므로
클론을 한다면 이 과정은 생략합니다.
원래는
npm install styled-components
이 명령어를 사용해야함.
1 . 그 다음 styled-components 를 파일에서 사용하려면 import를 해줘야 합니다.
따라서 사용하고 싶은 파일 상단에
import styled from "styled-components";
를 작성해줍니다.
그러면 이제 styled component를 작성할 준비를 마쳤습니다.
2 . 실제 우리 프로젝트의 버튼 코드를 천천히 살펴봅시다!
Button.jsx파일
import styled from "styled-components";
const ButtonBox = styled.button`
border: 1px solid #F28482;
background-color: #F28482;
border-radius: ${props => props['border-radius'] || '6px'};
width: ${props => props.width || '420px'};
padding-top: 13px;
padding-bottom: 13px;
margin-bottom: 10px;
color: white;
font-size: medium;
font-weight: bold;
`;
const Button = (props) => {
return (
<ButtonBox width={props.width} border-radius={props.borderRadius} >{props.children}</ButtonBox>
)
}
export default Button;
뭔가 많이 복잡해 보이지만 원리는 똑같습니다.
1) import를 통해 스타일드 컴포넌트 사용을 시작.
2) button이라는 태그를 만들어서 변수에 할당.
const ButtonBox = styled.button`
border: 1px solid #F28482;
background-color: #F28482;
border-radius: ${props => props['border-radius'] || '6px'};
width: ${props => props.width || '420px'};
padding-top: 13px;
padding-bottom: 13px;
margin-bottom: 10px;
color: white;
font-size: medium;
font-weight: bold;
`;
일단은 ‘이런 스타일을 사용한다’ 정도만 인지해주세요.
ButtonBox는 변수명이기 때문에 자기 마음대로 작성.
하지만 어느정도 의미는 알 수 있도록 작성.
3)
const Button = () => {
return (
<ButtonBox></ButtonBox>
)
}
기본적으로 이 모양이 기본 모양입니다.
위에서 만든 변수명 ButtonBox를 그대로 태그로 사용합니다.
다른 세부 내용들은 뒤에서 설명.
4) 그리고 이 내가 만든 Button을 다른 곳에 사용하기 위해서
export default Button;
를 작성해줍니다.
5) 이렇게 하면 Button.jsx파일에서 작성한 나의 버튼을 다른곳에서도 사용할 수 있게 됩니다.
우리 프로젝트에서 SignupForm(회원가입)에 들어가는 일부 버튼을 살펴봅시다.
다른 코드들은 살펴보지 말고 Signup과 Button만 봅시다.
Button.jsx에서 우리가 만든 Button을 SignupForm에서 사용할 수 있게 됩니다.
SignupForm.jsx파일
const SignupForm = () => {
<EmailContainer>
<Input htmlFor="signupEmail" width="250px" id="signupEmail" placeholder="이메일 입력" />
<Button width="25%" >인증 요청</Button>
</EmailContainer>
}
6) 그런데 이렇게 만든 버튼의 크기를 늘리고 싶다면 어떻게 해야할까요?
혹은 줄이고 싶다면?
어쨋든 커스텀 하고싶다면?
아래 코드에서 Button 안에 있는 width부분을 다시 봐봅시다.
SignupForm.jsx파일
const SignupForm = () => {
<EmailContainer>
<Input htmlFor="signupEmail" width="250px" id="signupEmail" placeholder="이메일 입력" />
<Button width="25%" >인증 요청</Button>
</EmailContainer>
}
우리가 Button을 사용하는 곳에서 width=”25%” 이런식으로 지정해줍니다.
7) 그리고 다시 원래 Button을 만들었던 곳으로 돌아갑니다.
import styled from "styled-components";
const ButtonBox = styled.button`
border: 1px solid #F28482;
background-color: #F28482;
border-radius: ${props => props['border-radius'] || '6px'};
width: ${props => props.width || '420px'};
padding-top: 13px;
padding-bottom: 13px;
margin-bottom: 10px;
color: white;
font-size: medium;
font-weight: bold;
`;
const Button = (props) => {
return (
<ButtonBox width={props.width} border-radius={props.borderRadius} >{props.children}</ButtonBox>
)
}
export default Button;
<ButtonBox width={props.width} border-radius={props.borderRadius} >{props.children}</ButtonBox>
이 부분에 주목해주세요.
<ButtonBox width={props.width}> 를 작성하였는데
이 코드의 의미는
앞에 SignupForm.jsx파일에서 작성한
width="25%"를 전달한다는 의미입니다.
즉, props.width에 25%가 들어간다는 소리 입니다.
그렇다면 위 코드는
<ButtonBox width="25%">{props.children}</ButtonBox>
이렇게 변하겠죠?
그러면 이제 위의 ButtonBox에서
const ButtonBox = styled.button`
width: ${props => props.width};
`;
이렇게 작성하면 props.width는 25%가 되어서
const ButtonBox = styled.button`
width: 25%;
`;
가 됩니다.
${} 의 의미가 궁금하다면 템플릿 리터럴 을 공부해보세요!
그래서 우리가 Button을 커스텀 할 수 있게 되는 것입니다.
한번에 이해하려 하지 마시고
여러번 봐서 익숙해집시다.
궁금한 점이 있으면 언제든지 질문 환영입니다!
댓글