Adapting and Extending

이렇게 코드가 있을때 Box가 있을때 박스마다 다른 색상을 주고싶다면?

function App() {
    return (
        <Father>
            <Box style={{backgroundColor="lightGreen"}}/>
            <Box style={{backgroundColor="skyBlue"}}/>
        </Father>
    );
}

이런식으로 줄것이다. 근데 이렇게 주면 style-component를 쓸 이유가 없다.
그래서

function App() {
    return (
        <Father>
            <Box bgColor="skyBlue" />
            <Box bgColor="lightGreen" />
        </Father>
    );
}

이렇게 bgColor라는 props로 값을 준다.

그럼 상단의 style-component에서는 간단하게

bgColor로 할당된 값이 따로 들어가서 결과가 잘 나온다.

또 한개의 style-component가 있을때 다른 component에 동일한 값을 주고싶을땐?

이렇게 styled뒤에 html값을 주는게 아닌 가져올 component명을 준다.

그러면 가져온 값도 할당되고 새롭게 추가로 값도 줄수있다.

'As' and Attrs

As

동일한 두개의 버튼이 있다.
그런데 두번째 버튼의 태그를 바꾸고는 싶은데 그렇게 되면 디자인까지 바뀌게된다.
그럴땐 어떻게 할까?

as라는 값이 있다. as에 원하는 태그명을 넣어준다. 그러면?

분명 같은 버튼태그인데 a태그로 바뀐것을 볼수있다. a태그이니 href도 충분히 줄수있다.

Attrs

한개의 태그에 속성을 한번에 다주는 방법이 있다.
기존은 태그마다 똑같이 달아줬어야 할것이다.

이렇게 5개의 input태그가 있을때?

이렇게 attrs로 뒤에 필요한 값을 준다. 그러면

이렇게 다 들어갔다.

매우 간단하다.

Animations and Pseudo Selectors

애니메이션 및 hover effect 주는법

애니메이션을 주기위해선 style-component가 가지고있는 keyframs를 줘야한다.

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

그리고

애니메이션 세팅을 한다.

컴포넌트에는 세팅한 애니메이션을 주고 필요한 옵션을 주면 잘 돌아간다.

(동영상 녹화가 안되서 궁금하면 알아서 해보셈)

hover effect도 주고싶다?

Box태그 안에 있는 span값에다가
&:hover로 주던지, span:hover로 주던지 알아서하면 된다.

또한 영상녹화 모르겠다.

Pseudo Selectors part Two

현재 Box태그속 span태그가 있다. 근데 span을 p태그로 바꾸고싶다. 그럼 span태그의 스타일이 작동안할것이다.
태그에 종속받지 않으려면 어떻게 해야할까?

우선

Emojo라는 변수에 span을 준다.

${Emoji}로 위에서 할당된 값을 받아온다.
이렇게 되면 적어놨듯이 위에서 태그가 정해지므로 신경쓰지 않아도 된다.
바꿀꺼면 위에만 Emoji태그만 바꾸면 된다.

✰DarkMode

다크모드를 주는 방법은 style-component에서 제공하는 ThemeProvider를 사용하는것이다.

그래서 index.js에

import { ThemeProvider } from "styled-components";

필요한값을 세팅후

을 ThemeProvider로 감싸준다. 그후 theme 태그로 세팅한 값을 준다.

App.js에서는

index.js에서 Theme를 통해서 받아온 값을
각각 넣어준다.

짜란!

style-componenet는 생각보다 기능도 많고 재밌다.
잘만 활용하면 엄청날거 같다. 하하하하
이상 첫번째 노마드 리액트 마스터 클래스 1장 완료!