필자는 노마드 코더의 React-master-class를 재수강을 시작했다!
목적은 React를 활용한 사이드프로젝트에 참여하기위해!
팀 프로젝트를 진행하기 위해서 React 실력을 성장시켜놔야 팀원들에게, 그리고 나 스스로에게
짐을 덜어줄 수 있을 거라 생각했다!
노마드코더 인터넷강의
그렇게 첫 번째 카테고리인 Styled-Component 를 학습했다!
Styled-Component
이름과 같이 스타일화(?) 된 컴포넌트를 만들어주는 라이브러리이다.
처음 리액트 강의를 수강했을 때 제대로 학습하지 않아 기억에 거의 남아있지 않았다.
그렇게 새로 배운다는 마음으로 학습하였고 학습의 기억을 잊어버리지않기위해 이곳에 저장해본다!
기본설정
React 세팅
npx create-react-app react-masterclass
styled-components설치
npm i styled-components
import styled from "styled-components";
적용방법
styled-component를 사용하지 않고 css를 적용하는방법은 3가지가 있다.
- 직접 style을 지정하는 방법
const App = ()=>{
return <div style={{backgroundColor:"tomato"}}>Hello!</div>- module.css를 적용하는 방법
- 전체 css를 적용하는 방법
styled-component는 말 그대로 커스터마이징 된 컴포넌트를 바로 만들 수 있다.
const Box = styled.div`
background-color:tomato;
color:white;
border:0;
`
// 이때의 `는 백틱으로 ' 나 " 와 다르다.
이렇게 만들었을 때 좋은 점은 아래 사진처럼 각 컴포넌트에 className을 자동으로 랜덤하게 생성시켜준다는 것이다.
)
컴포넌트 확장하는 방법
컴포넌트를 만든 후 거의 비슷한 컴포넌트를 만들고 싶으면
처음부터 다시 컴포넌트에 대한 스타일을 적어주는 것이 아니라 만들어진 컴포넌트에 대한
스타일을 복사 해올수 있다. 그 방법은 아래와 같다!
const Box= styled.div`
color: white;
background-color: tomato;
border: 0;
border-radius: 15px;
`
const BoxButton =styled(Box)`
font-size:30px
`
//이렇게 하면 Box 컴포넌트에 있는 스타일 속성을 그대로 가져오면서 추가 할 수 있다.
컴포넌트에서 태그네임(tagName)만 바꾸고 싶을 때
컴포넌트를 만들고 난 후 스타일은 같지만 다른 html 태그를 생성하고 싶다면
아래와 같은 방법을 사용하면 된다!
const Box= styled.div`
color: white;
background-color: tomato;
border: 0;
border-radius: 15px;
`
const App =()=>{
return <div>
<Box></Box>
<Box as="button"></Box
</div>
// 이렇게 as를 사용하면 원하는 태그로 변경이 가능하다!!
}
사용된 컴포넌트에 속성에 as를 추가하여 "원하는 html태그명"을 넣으면된다!
컴포넌트에서 원하는 스타일을 넣고 싶을때(기존 세팅에 추가)
Props를 넘겨주면 된다. Props는 부모가 자식에게 넘겨주는 정보이다.
부모에서 데이터가 관리된다고 보면된다! 이를 이용하여 각각 다른 정보를 내려주면서
공통적인 부분은 살릴 수 있다.
const Box = styled.div`
backgroundColor:"tomato"
font-size:${(props)=>props.fs}
`
const App = ()=>{
return <Box fs="10px"></Box>
}
컴포넌트에서 공통 속성을 넣고싶을 때
컴포넌트를 만들었는데 공통 속성을 많이 넣어야하는 경우가 있다면 attrs를 사용하면 된다!
여기서 attrs 는 attribution(속성)을 의미한다.
const Input = styled.input.attrs({require:true, maxLength:10, placeholder:"HelloWorld" })``
// styled.html태그명.attrs({속성값})
const App = ()=>{
return <div>
<Input/>
<Input/>
<Input/>
<Input/>
</div>
}
컴포넌트에 animation을 넣고 싶을 때
이는 styled-componet에서 제공하는 keyfranmes를 import 해오면 된다!
import styled, { keyframes } from "styled-components";
const rotateAni =ketframes`
from{
transform:rotate(0deg);
border-radius:0px;
}
to{
transform:rotate(360deg);
border-radius:50px;
}
`
const Box = styled.div`
background-color: "green"
animation: ${rotateAni} 1s linear infinite;
`위 코드처럼 일반 css와 동일하게 사용하면 된다.
Pseudo Selectors (1)
편의상 수도 셀렉터라고 말하겠다! 수도 셀렉터는 styled-componet에서 특별하게 쓰이는
셀렉 문법이다.
만약 스타일링된 컴포넌트 하위의 일반 html 태그에 접근하고 싶다면??
아래와 같은 방법으로 접근하면 된다!
const App =()=>{
<div>
<Box>
<span></span> // 이 span에 접근하고 싶다면 !! ???
</Box>
</div>
}
const Box = styled.div`
background-color:"black"
span{
font-size:12px;
} // 컴포넌트를 만드는 과정에서 다시 셀렉을 할 수 있다!
`
// 아래와 같은 것도 가능하다
const Box = styled.div`
background-color:"white"
span{
font-size:12px;
&:hover{
font-size:2px;
}
}
`
//여기서 &:hover 은 span:hover와 같은 말이다.
만약 스타일링된 컴포넌트 하위의 스타일링 된 컴포넌트에 접근하고 싶다면??
위 방법과 동일하게 된다.! 핵심은 이게 가능하다는 점 !
const Emoji = styled.span`
font-size: 36px;
`;
const Boxx = styled.div`
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
background-color: tomato;
animation: ${rotationAnimation} 1s linear infinite;
${Emoji} {
&:hover {
font-size: 10px;
}
}
span {
&:hover {
font-size: 50px;
}
}
`;
function App() {
return (
<Father>
<Boxx>
<Emoji as="p">😁</Emoji>
</Boxx>
</Father>
);
}
Theme을 활용한 공통환경스타일 구축!!
Theme은 모든 색상을 가지고 있는 "Object" 라고 생각하면 된다!
이 전에 리액트 마스터 클래스를 학습했을 땐 theme을 적용하는 방법을 그냥 암기하려 했던 거 같다.
javascript를 나름 열심히 공부했던 (그렇지만 잘하지는못하는..) 날들 덕에 theme을 적용하는 것은
그냥 props를 전달해주는 것 뿐이고 그 props에 관한 정보는 가장 최상위 부모에서 control한다는 것을
이해할 수 있다. 사용 방법은 아래와 같다!
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111",
};
const lightTheme = {
textColor: "#111",
backgroundColor: "whitesmoke",
};
const root = ReactDom.createRoot(document.getElementById("root"));
root.render(
<ThemeProvider theme={lightTheme}>
<App/>
</ThemeProvider>
)
//이렇게 되면 Index.js에서 App 컴포넌트로 theme라는 props를 전달해준 것과 같다!
//App.js
const Wrapper =styled.div`
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background-color:${props=>props.theme.backgroundColor}
`
const Title = styled.h1`
color:${props => props.theme.textColor}
`
function App() {
return (
<Wrapper>
<Title>Hello!</Title>
</Wrapper>
);
}
이렇게 theme은 그저 모든 색을 가지고 있는 object로 사용이 되는 것이고
ThemeProvider를 통해 색에 관련된 (Theme) props를 하위 컴포넌트에 전달해준다.
이는 theme에 대한 정보 (light, dark)는 최상위컴포넌트에서 상태관리를 통해 변경이
가능 할 것으로 보인다!
