styled-components
보통 CSS를 작성하게 되면,
CSS 파일을 하나 생성해서 CSS 코드를 쭉 ~~ 적은 뒤, 파일을 import 해서 사용하곤 한다.
그렇게 되면, HTML 파일에서는 class 이름을 계속 정해줘야 하고(혹여나 겹치지 않게), 그 class 이름들을 불러와 CSS 파일에 적용을 시켜주어야 한다.
나도 작은 프로젝트, 만들기를 할 때마다 class 이름을 지정해주는게 저어어엉말 힘들었었다.
이것을 위해 사용하는 것이 --> styled-components 이다.
중요한 기능들
1 . 컴포넌트 기반 스타일링:
스타일이 적용된 HTML 태그를 생성하는 styled 함수를 제공한다. 이 함수를 통해 스타일이 적용된 React 컴포넌트를 생성할 수 있다.
간단한 
box를 만든다고 가정해보자.
import styled from 'styled-components 로 styled-components를 import를 한 후,
Father, BoxOne, BoxTwo, Text는 각각 스타일이 정의된 컴포넌트를 작성한다.
(여기서 중요한 부분은 백틱 사이에 css 속성을 담아야 한다.)
2 . 동적 스타일링: props로 동적으로 스타일을 변경할 수 있다.
위의 코드를 살펴보면 BoxOne, BoxTwo의 코드가 background-color를 제외한 나머지 속성들은 똑같은 것을 확인할 수 있다.
그럼 중복이 발생한 건데, 중복을 어떻게 없앨 수 있을까?
Box는 bgColor prop을 전달하고, 배경색을 동적으로 설정할 수 있는 스타일을 지정할 수 있다!
3 . 스타일 상속
그럼 이때, Box에 지정해 두었던 CSS 속성을 그대로 물려 받고, 속성을 추가하고 싶을 때
--> Box Css + 추가할 속성들이 생긴다면??
이렇게 작성을 하게 되면, Box와 Circle 컴포넌트에 중복된 요소들이 발생하고 만다.
이럴 경우에는 ? 
styled(Box) 를 적용해서 Box의 속성을 물려 받아오면 된다.
Circle은 Box의 스타일을 상속받기 때문에, Box의 모든 스타일을 포함한다.
4. 태그 속성을 변경하고 싶을 때 ?
<Btn> 의 컴포넌트 속성을 가진 button이 두개가 존재한다고 가정해보자.
CSS 속성은 동일하게 두고 싶은데,
두번째 버튼에서는 button 태그가 아닌, a 링크 태그를 적용해서 버튼을 눌렀을 때, 이동이 가능하게 하도록 하고 싶다.
그럼 어떻게 해야할 까 ?
<Btn as="a" href="주소~~"> 로 지정해두면 된다.
as Prop : styled-components의 as prop은 스타일링된 컴포넌트를 다른 HTML 요소로 렌더링할 수 있게 한다.
Btn 컴포넌트를 (원래 Button 태그) a 태그로 렌더링하여 링크로 동작하게 한다.
5. 공통된 속성 적용 (?)
이러한 <Input/> 태그가 엄청 많이 필요하다고 해보자. Input에 required : true 라는 속성과 minLength: 10 이라는 속성을 모든 Input 태그에 주고 싶다고 가정해보자
그럼 모든 Input에 속성을 적용해 주어야 할까 ?
이건 좀 ... 아니다!
이렇게 const Input = styled.input.attrs({ required : true , minLength : 10}) 속성을 주게 되면 , Input 태그에 공통으로 적용된다!
이처럼 개발자 모드에서 적용이 잘 된 것을 확인할 수 있다!
styled-components : animation
CSS에서 적용하던 animation 은 어떻게 적용하면 될까 ?
이러한 <Box>태그가 있다고 가정해보자.
이 Box 태그가 360도 움직이도록 animation을 주고 싶다면?
keyframes 정의
: keyframes 함수를 사용하여 애니메이션 키프레임을 정의한다.
0%부터 시작하여 50%까지는 박스가 회전하고, 동시에 가장자리의 모양이 변경된다.
50%에서는 360도 회전하며, 가장자리는 100px의 원형이 된다.
100%에서는 원래 위치로 회전하며, 가장자리 모양은 다시 원래대로 돌아간다.
이후 <Box> 컴포넌트에 animation 정의를 넣어준다 (?)
animation 속성에 앞서 정의한 animation 키프레임을 적용하여 애니메이션을 적용한다.
그렇다면, 위에서 확인 가능한,
<Box>
<span>😀</span>
</Box><span> 태그 안에 있는 이모티콘의 폰트 크기를 50px로 변경하고 싶다. 이럴 땐, 어떻게 해야할까 ?
이와 같이 <Box> 컨포넌트 안에 span 태그의 스타일 CSS를 정의해두면 된다.
--> Box 태그 안에 있는 CSS를 의미한다.
그럼, <span> 의 마우스를 올리고 내렸을 때의 효과는 어떻게 주면 될까?
기본 css에서는 아마도 span :hover 로 hover 효과를 주었다.
하지만, styled-components에서는
span {
font-size: 50px;
&:hover {
font-size: 80px;
}
}& : hover 형태로 action을 줄 수 있다. 여기서 & 가 span을 의미하기 때문이다!
이와 같이 hover뿐만 아니라 , active와 같이 animation을 줄 수 있다!
여기서 잠깐!
styled-components를 단순히 설치만 하고 사용하다보니, CSS 속성이 자동완성이 되지 않아서
일일이 치다가 '분명, 확장이 있을 텐데?' 하고 찾아보았더니
이걸 찾았다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
정말 정말 .. 편하다 ..🥲
사랑해요 자동완성 ❤️
Themes
Themes : 기본적으로 모든 색상을 가지고 있는 object
맥북을 쓰고 있는 나로써, 다크모드 or 기본 이런 모드에 대해서 들어봤다.
다크 모드와 기본 모드는 어떻게 적용해야 하는 것일까?
import { ThemeProvider } from 'styled-components';
먼저, import를 해서 ThemeProvider를 불러온다.
const dartTheme = {
textColor: 'whitesmoke',
backgroundColor: '#111',
};
const ligthTheme = {
textColor: '#111',
backgroundColor: 'whitesmoke',
};dartTheme과 ligthTheme이라는 두 가지 테마를 정의한다.
각 테마에는 textColor와 backgroundColor라는 두 가지 속성이 있다고 가정해 보는 것이다.
여기서 중요한 점은, 속성의 이름을 똑같이 정해주어야 한다는 점이다!
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ThemeProvider theme={dartTheme}>
<App />
</ThemeProvider>
<App />
</React.StrictMode>
);여기서 중요한 점은, <ThemeProvider> 태그는 <App/> 태그를 감싸고 있어야 한다는 점이다!
이로써, <App/>은 <ThemeProvider>에 있는 다양한 속성들을 사용할 수 있다.
props.theme.textColor:이 부분은 styled-components의 ThemeProvider를 통해 제공된 테마 속성 중에서 textColor 값을 가져오는 것이다.${(props) => ...}: ES6의 화살표 함수를 사용하여 함수를 정의한다. 이 함수는 컴포넌트의 props를 인자로 받아서 그 안에 있는 theme 속성을 사용한다.
이렇게 정의해두면 50% 정도 완료 한 것이라고 한다!
나머지 50% 는 Local Estate ManageMent의 몫이라고 하는데, 이는 다음 시간에 배워 볼 예정이다!
