1주차
노마드코더 React 마스터클래스 1~3강 수강
https://nomadcoders.co/react-masterclass
✍️styled components란?
styled-components란 Javascript 파일 내에서 css를 사용할 수 있게 해주는 대표적인 라이브러리
터미널에 npm i styled-components 입력하여 설치
styled components에서 import한 styled에 .을 찍고 사용하려는 태그명을 적은 뒤 ``(back tick)를 찍자.. 그리고 그 back tick사이에 일반적인 css를 작성하면 됨~!
✍️styled components를 사용하는 이유가 뭘까?
function App(){
return(
<div style={{display: "flex"}}>
<div style={{backgroundColor: "teal", width: 100, height:100}}></div>
</div>import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
`;
const Box = styled.div`
background-color: teal;
width: 100px;
height: 100px;
`;
function App(){
return(
<Wrapper>
<Box/>
</Wrapper>
);
}위 두 코드는 같은 화면이 출력된다.
그치만 div범벅인 첫 코드보다 확실히 두번째 코드가 더 보기 좋음!!
훨씬 간단하고 한 눈에 css를 파악할 수 있지여,,
심지어 컴포넌트 형태라 재사용도 가능함🤤🤭
이 두번째 코드가 바로 styled-components를 사용한 코드임
이제부터 본격적으로 styled-components에 대해 더 깊게 파보자..
✍️ Adapting and Extending
📌 props 전달로 조건부 스타일링
만약에 아래와 같은 코드가 있다고 해보자
function App(){
return(
<div style={{display: "flex"}}>
<div style={{backgroundColor: "teal", width: 100, height:100}}></div>
<div style={{backgroundColor: "tomato", width: 100, height:100}}></div>
</div>
보다시피 4-5줄은 backgroundColor만 다르다..
이 경우 굳이 불필요한 복붙할 필요 없이
...
const Box = styled.div`
background-color: ${(props)=>props.bgColor};
width: 100px;
height: 100px;
`;
function App(){
return(
<Wrapper>
<Box bgColor="teal"/>
<Box bgColor="tomato"/>
</Wrapper>
);
}해주면 된당
props를 전달해서 함수 내에서 해당 props 이름을 받기만 하면 완료
이렇게 styled-components를 이용해서 복붙없이
원하는 속성값만 따로 조건부 스타일링 시켜줄 수 있음!!!!!
너~~~무너무 간단하고 직관적이라 좋다,,,,,,ㅎㅎㅎ
📌 styled components를 상속받아보자
이번에는 기존 컴포넌트의 모든 것을 가져다가 새로운 것을 더해보자!
예를 들어 우리가 Circle을 만들고 싶은데 이 Circle엔 우리가 기존에 만들어뒀던 Box의 모든 속성값과 동일하지만 border-radius 속성만 추가하고 싶다고 하자.
...
const Box = styled.div`
background-color: ${(props)=>props.bgColor};
width: 100px;
height: 100px;
`;
const Circle = styled(Box)`
border-radius: 50px;
`;
function App(){
return(
<Wrapper>
<Box bgColor="teal"/>
<Circle bgColor="tomato"/>
</Wrapper>
);
}그렇다면 이렇게 작성하기만 하면 된다~!
그냥 styled 뒤에 .태그 가 아닌 (확장하고자하는 컴포넌트)를 작성해주면 됨.
하 너무 간단함,,
진짜 엄청난 기능.👏👏👏👏👏👏
📌 as
이번에는 컴포넌트의 태그는 바꾸고싶지만 스타일은 바꾸고 싶지 않을 때를 알아보자
ex)
...
const Btn = styled.button`
background-color: tomato;
border: 0;
border-radius: 15px;
`;
function App(){
return(
...
<Btn as="a" href="/">Log in</Btn>
...
);
}이렇게 기존 컴포넌트에 as="변경을 원하는 태그"를 prop으로 전달해주면 우리가 원하는대로 만들어진당
위 예시코드에서 우리는 버튼태그를 사용하고 있지만 링크로 태그 이름을 바꾼 것이다.
📌 attrs
styled components가 컴포넌트 생성 시 고정 속성값을 설정하는 방법을 알아보자
...
const Input = styled.input.attrs({required: true})`
background-color: tomato;
`;
function App(){
return(
...
<Input/>
<Input/>
<Input/>
<Input/>
<Input/>
);
}위 코드는 고정 속성값으로 required: true를 전달해주었으므로 선언된 다섯개의 Input 컴포넌트 모두에 해당 속성값이 적용된다.
required: true 뒤에 minLength:10 같은 속성도 당연히 추가 가능~.~
동일한 컴포넌트를 여러번 사용할 때 유용하겠지?!
📌 styled-components 안에 있는 특정 태그 target
...
const Box = styled.div`
background-color: ${(props)=>props.bgColor};
width: 100px;
height: 100px;
span{
font-size: 36px;
&:hover{
font-size: 60px;
}
}
`;
function App(){
return(
<Wrapper>
<Box bgColor="teal">
<span>🤩</span>
</Box>
</Wrapper>
);
}이런 식으로 해주면 됨..
Box안에 있는 span태그를 특정해서 조건부스타일링 해줄 수 있고
간단하게 &:속성값을 이용해서 pseudo selector를 설정할 수 있다.
...
const Emoji = styled.span`
font-size: 36px;
`;
const Box = styled.div`
background-color: ${(props)=>props.bgColor};
width: 100px;
height: 100px;
${Emoji}{
&:hover{
font-size: 60px;
}
}
`;
function App(){
return(
<Wrapper>
<Box bgColor="teal">
<Emoji as="p">🤩</Emoji>
</Box>
</Wrapper>
);
}추가로 만약 위와 같이 코드를 짠다면 Box 컴포넌트 속 Emoji 컴포넌트를 직접 targeting 했기 때문에 기존 span태그가 아닌 p태그로 태그이름을 변경해도 잘 적용된다~!
👏👏👏👏👏👏👏👏👏👏🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩
+) 아 그리고 당연하지만 Box 컴포넌트 밖에 있는 Emoji 컴포넌트엔 설정해뒀던 모든 css 적용되지 않는다.
✍️ Styled-Components의 Animation
keyframes를 먼저 import 해줘야 사용가능
...
const rotationAnimation = keyframes`
...
`;
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation}
`;
function App(){
return(
<Wrapper>
<Box/>
</Wrapper>
);
}
...
위 코드처럼 작성해주면 animation이 적용된다.
${rotationAnimation} 뒤에 실행시간이나 추가적인 설정을 덧붙일 수 있다.
✍️ Theme
기본 설정
1. index.js로 가서 ThemeProvider를 import 해주자
2. App을 ThemeProvider로 감싸주자
3. props값으로 theme이 필요함~ 이걸 설정해줄겁니다
설정해주는건 차차 해보자~~!!
