오늘 한 일
- 프로그래머스 알고리즘 풀기
- Styled-Components 공부하기
- Redux, React-Router-Dom 스파르타코딩클럽 강의 다시보기
- TodoList 기본 과제 안보고 만들기
- TodoList 기본 과제 Styled-Components를 사용하여 만들기
Styled-Components
styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.
설치 방법
$ npm install --save styled-components
기본 문법
- styled.<HTML 태그명>`` 백틱안에 css 코드 입력하기
- 변수로 저장된 것은 컴포넌트이며 jsx 문법에서 사용한다.
import styled from "styled-components";
const Father = styled.div`
display: flex;
`;
const Box = styled.div`
background-color: ${(props) => props.bgColor};
width: 100px;
height: 100px;
`;
// 박스의 모든 속성을 복사하고 나머지 속성을 추가해준다.
const Circle = styled(Box)`
border-radius: 50px;
`;
const Btn = styled.button`
color: white
background-color: tomato;
border: 0;
border-radius: 15px;
`;
// 속성값을 기본적으로 부여해준다.
const Input = styled.input.attrs({ required: true, minLength: 10 })`
background-color: tomato;
`;
// as 속성을 쓰면 html 태그를 같은 스타일을 적용하며 바꿀 수 있다.
function App() {
return (
<Father>
<Box bgColor="teal" />
<Circle bgColor="tomato" />
<Btn>Log in</Btn>
<Btn as="a" href="/">
Home
</Btn>
<Input />
</Father>
);
}
export default App;더 알아보기
- 애니메이션 사용하기
- Pesudo Selectors 사용하기
import React from "react";
import { keyframes } from "styled-components";
import styled from "styled-components";
const Wrapper = styled.div`
display: flex;
`;
const rotationAnimation = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const Emoji = styled.span`
font-size: 30px;
`;
// 애니메이션 주는 방법, 박스안에 있는 span 태그에 스타일 주는 방법
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
${Emoji} {
&:hover {
font-size: 40px;
}
&:active {
opacity: 0;
}
}
`;
// 박스 밖의 Emoji는 hover, active 효과를 받을 수 없다.
export default function Test() {
return (
<div>
<Wrapper>
<Box>
<Emoji>😄</Emoji>
</Box>
<Emoji>😄</Emoji>
</Wrapper>
</div>
);
}props를 이용해서 사용
import React from "react";
import styled from "styled-components";
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
`;
const boxList = ["red", "green", "blue"];
const getBoxName = (color) => {
switch (color) {
case "red":
return "빨간 박스";
case "green":
return "초록 박스";
case "blue":
return "파란 박스";
default:
return "검정 박스";
}
};
const App = () => {
return (
<div>
{/* map 으로 돌려서 StBox 컴포넌트를 생성한다.
boxColor = "red", "green", "blue"
borderColor = "red", "green", "blue"
getBoxName 에 "red", "green", "blue" 를 보내준다.
getBoxName 이 "red", "green", "blue" 케이스에 맞게 문자를 반환한다. */}
{boxList.map((boxColor) => (
<StBox borderColor={boxColor}>{getBoxName(boxColor)}</StBox>
))}
</div>
);
};
export default App;DarkMode
- 완벽하진 않지만 반은 완성했다.
- DarkMode를 구현하기 위해 ThemeProvider를 임포트한다.
- DarkMode 컴포넌트에 ThemeProvider 컴포넌트를 감싼다.
- ThemeProvider는 theme을 props로 가져야한다.
- theme의 값을 lightTheme로 바꿔주면 LightMode로 된다.
- 다크모드 라이트모드를 구현하고 싶다면 property(키)의 이름이 같아야한다.
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";
import App from "./App";
import DarkMode from "./DarkMode";
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111",
};
const lightTheme = {
textColor: "#111",
backgroundColor: "whitesmoke",
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ThemeProvider theme={darkTheme}>
<DarkMode />
</ThemeProvider>
</React.StrictMode>
);// DarkMode.jsx
import React from "react";
import styled from "styled-components";
// DarkMode 컴포넌트가 ThemeProvider 안에 있기 때문에
// Theme object에 접근해서 textColor, backgroundColor을 얻을 수 있다.
const Title = styled.h1`
color: ${(props) => props.theme.textColor};
`;
export default function DarkMode() {
return (
<div>
<Title>Hi</Title>
</div>
);
}
취준 개발자