리액트마스터 #2 Styled-components

공통:

최 상위 태그의 스타일은 항상 display:flex이다. 여기서는 Father, Wrapper가 해당.

---

#2.2 Adapting and Extending

 

ui설정

 

 

 

 

 

 

같은 코드 중복.

 

 

 

 

 

 

 

 

이렇게 사용할 수 있다.

 

 

 

 

 

---

# 2.3 'As' and Attrs

button태그에서 as='a'는 a태그가 된다. <button as='a' href='/' / >는 html에서 <a href='/' /> 태그로 보여진다.

만약 div태그에서 as='header'를 입력하면 <div />태그는 html에서 <header />태그로 보여진다.

 

Input태그마다 required를 쓰지말자.

 

 

 

 

 

 

 

 

 

 

 

 

 

이렇게 styled-components의 attrs속성을 사용하면 한 번 입력으로 위처럼 가능하다. 또한 minLength:10을 주면 모든 Input태그에서 적용된다.

 

 

 

 

 

 

 

 

---

# 2.4 Animations and Pesudo Selectors

 

Box 태그에 애니메이션 설정

 

 

 

 

 

 

styled-components에서 {keyframes}속성을 import해온다.

keyframes` from{color:tomato} to{color:teal}

이 안은 from to가 될 수도 있고 0% 50% 100%로 설정할수도 있다.

`

그리고 Box태그안의 span태그에 대해서는 styled-components안의 태그라서 이미지처럼 Box태그의 스타일링에서 설정이 가능하다.

hover도 마찬가지.

 

const Box=styled.div`

span{

&:hover{}

&:active{}

}

`는 

const Box=styled.div`

span{}

span:hover{}

span:active{}

`와 같다.

 

---

#2.5 Pseudo Selectors part Two

 

2.4강의에서는 ui에서 span태그를 p태그로 바꾸면 hover가 작동하지않는다. 왜냐면 styled의 Box내부가 여전히 span으로 되어있기 때문이다. p태그로 사용하고싶으면 styled도 p태그로 바꿔줘야하는 불편함이 있다.

위와 같은 문제를 해결하기 위해 span태그도 styled로 만들어준다.

 

 

 

 

Emoji라는 span태그를 사용해서 styled-components를 만든다.

 

그러면 ui에서 Emoji as='p'로 하면 p태그도 사용되고 스타일링도 잘 적용 된다.

 

 

 

 

 

 

---

#2.6. Super Recap 복습

 

animation을 담당하는 styled변수를 export하면 다른곳에서 import해서 사용할수도 있다.

여기에서는 from to로 사용했다.

 

 

 

 

 

 

 

 

 

 

 

 

---

#2.7 Themes 다크모드 라이트모드 50%만 배우기

- theme이란, 기본적으로 모든 색상들을 가지고 있는 object이다. 

 

우선 main.jsx에서 ThemeProvider를 import해온다.

 

darkmode와 lightmode의 속성 이름은 같아야한다. 그래야 나중에 <ThemeProvider theme={darkmode or lightmode}/>의 theme내부 속성을 바꿀때 잘 작동하기 때문이다.

 

 

 

 

 

 

 

 

 

 

app.jsx에서 props로 theme의 속성을 가져온다.