Styled-component(정리중)

styled components 기본기능

styled components의 재사용 함수(props )${func}

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

:: 색깔만 다른 Box가 생성된다.

styling한 components의 extend
const Circle = styled(Box) border-radius: 50px;;

:: 모든 Box의 속성에 border-Radous:50px가 추가된 새로운 BOX가 생성된다.

styling한 component의 HTML tag 바꾸기 (props AS)

styling한 component의 속성 부여하기(attr)

const Input = styled.input.attr({required : true, minLength: 10, placeholder: '반갑습니다'})``;

:: 모든 Input에 속성(attr)이 부여된다.

---

component에 animation 효과 부여하기

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

const Box = styled.div ... animation: ${rotationAnimation} 1s linear infinite; ;

component의 nesting

const Box = styled.div`
...

span{
font-size: 2rem;
}
`;

component의 가상클래스

const Box = styled.div`
...
span{
...
&:hover{
font-size:40px;
}
}
component의 중앙 정렬

const Wrap = styled.div display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center;;

styling 된 component 안의 nesting 된 HTML의 요소의 변화와 상관 없이
적용되게 만들어주기.

const Emoji = styled.span font-size: 1rem;;

const Box = styled.div`
...

&:hover {
...
}
${Emoji} {
...
}
}
`;

  <Box>
 <Emoji as="div">🤩</Emoji>
  </Box>

:: div, span , a 어떤 tag든 상관 없이 똑같은 styling이 적용된다.

styled components의 theme // 모든 색상을 object로 갖고 있음.

theme 실행하기.

1. index.js에서 ThemeProvider import

2. ThemeProvider components로 App components 감싸기.
   ThemeProvider는 1개의 props를 갖게 되는데,
   변수로 구체적으로 결정할 필요가 있음.

theme에 어떤 색을 사용할 건지 정해야 함.
3. render 바깥에 변수 설정
const darkTheme = {
textColor:"whitesmoke",
backgroundColor:"#111"
}
const lightTheme = {
textColor:"#111",
backgroundColor:"#111""whitesmoke"
}

4. Theme을 사용함 component.js에 props로 전달하기. ${}

const Title = styled.h1 color: ${(props) => props.theme.textColor};;

Hello !

--

typescript의 interface

object shape (객체형태)를 Typescript에게 설명해주는
typescript의 개념이다.

interface 변수명 {
typescript에게 object shape으로 설명
부모에게 받아 온 프롭스 : string;
} - 꼬리표 작성

그리고 다시 넘기는 프롭스에 이 변수명을 달아줌

{부모에게 받아 온 꼬리표 }: 변수명(꼬리표장착)

스타일컴포넌트에도 꼬리표를 만들어 주고 장착해주어야 함.
(내부에 어떤게 들어가는지, 어떤 타입인지 설명)

interface 변수명2 {
bgColor : string;
} - 꼬리표 작성
const 스타일컴포넌트 = styled.div<변수명2>``;

이렇게 작성하므로 이제 실제 컴포넌트가 쓰이는 JSX에서도
props를 TS에게 잘 설명해 줄 수 있다.

꼬리표 작성과 장착은 하나씩 연결해야 한다. ( 다수로 묶을수 없음 )

원만들기: border-radius width의 절반값

interface PlayerShape{
name: string;
age: number;

const SayHello = (playerObj:PlayerShape) => Hello ${playerObj.name} you ar ${playerobj.age} old

default
optional

borderColor ?? bgColor
borderColor가 falsy 값이면 -> bgColor값을 실행한다.