리액트마스터 - styled-components

2.0

styled component css 적용 시 자동완성은
vscode-styled-components 익스텐션을 받으면 됨

2.1

npm i styled-components

import React from "react";
import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const BoxOne = styled.div`
  background-color: teal;  // 여기 보면 중복이됨
  width: 100px;
  height: 100px;
`;
const BoxTow = styled.div`
  background-color: orange;  // 여기 보면 중복이됨 props로 바꿔보자
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: white;
`;

const App = () => {
  return (
    <Father style={{ display: "flex" }}>
      <BoxOne>
        <Text>Hello</Text>
      </BoxOne>
      <BoxTow />
    </Father>
  );
};

export default App;

2.2

props로 bgColor 내리기

const BoxOne = styled.div`
  background-color: ${(props) => props.bgColor};  // 알아서 teal로 변경됨
  width: 100px;
  height: 100px;
`;
const BoxTow = styled.div`
  background-color: ${(props) => props.bgColor}; // 알아서 tomato로 변경됨
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: white;
`;

const App = () => {
  return (
    <Father style={{ display: "flex" }}>
      <BoxOne bgColor="teal" />
      <BoxTow bgColor="tomato" />
    </Father>
  );
};

styled(Box) 이용하기 : 전부 복붙하고 새로운 CSS도 설정

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`  // 이렇게 사용을 하면 Box의 CSS를 복제해서 가져옴
  border-radius: 50px;  // 별도로 추가할 것만 넣어주면 됨
`;
const App = () => {
  return (
    <Father style={{ display: "flex" }}>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
};

2.3

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
  margin: 20px 10px;
  padding: 10px 20px;
`;

const App = () => {
  return (
    <Father as="header">  // div를 hedaer로 바꿀 수 있음
      <Btn>Log in</Btn>
      <Btn as="a" href="/">  // 여기서 as를 통해, button 속성의 값을 a로 바꿀 수 있음
        Log in
      </Btn>
    </Father>
  );
};

attrs

const Input = styled.input.attrs({ required: true, maxLength: 5 })` // 한번에 input의 속성을 정할 수 있음
  background-color: tomato;
`;

const App = () => {
  return (
    <Father as="header">
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );
};

2.4

animation(keyframes)

import React from "react";
import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const rotationAnimaion = keyframes`
from{
  transform:rotate(0deg);
  border-radius:0px;
  
}
to{
  transform:rotate(360deg);
  border-radius:100px;
}
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotationAnimaion} 1s linear infinite;
`;
const App = () => {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
};

export default App;

안에있는 span에 hover 주기

import React from "react";
import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;

const rotationAnimaion = keyframes`
0%{
  transform:rotate(0deg);
  border-radius:0px;
  
}
50%{
  transform:rotate(360deg);
  border-radius:100px;
}
100%{
  transform:rotate(0deg);
  border-radius:0px;
}
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: tomato;
  animation: ${rotationAnimaion} 10s linear infinite;

  span {
    font-size: 32px;

    &:hover {
      font-size: 80px;
    }
  }
`;
const App = () => {
  return (
    <Wrapper>
      <Box>
        <span>😀</span>
      </Box>
    </Wrapper>
  );
};

export default App;

2.7

Theme

index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";

import App from "./App";

const darkTheme = {  // 여기서 미리 색상을 지정해줌
  textColor: "whitesmoke",
  backgroundColor: "black",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider theme={darkTheme}>  // dark theme을 사용한다고 선언
    <App />
  </ThemeProvider>
);

app.js

import React from "react"; 

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;

const Title = styled.h1`
  color: ${(props) => props.theme.textColor}; // props로 내려받아주면 끝
  background-color: ${(props) => props.theme.backgroundColor};
`;
const App = () => {
  return (
    <Wrapper>
      <Title>하이</Title>
    </Wrapper>
  );
};

export default App;