스타일드 컴포넌트 !!!

클래스명 중복 생각 안 해도 됨 알아서 중복 제거 .
Sass설치 필요 x->고로 웹팩 설정 따로 필요 없음!
변수, 믹스인, 네스티드, 장점은 다 사용 가능 + props까지 !!!

시작해봅시다

injectGlobal

1
2
3
4
5
6

injectGlobal`
body {
  margin: 0,
}
`
//fontfamily 등등 공용으로 쓰는 것들을 injectGlobal 을 통해서 넣어줄 수 있다.

Extend

비슷한 스타일을 그대로 가지고 와서 다른 태그 혹은 컴포넌트들이 쓸 수 있다 ! + extend해서 덧붙여서 쓴다
기본 layout위주로 컴포넌트들을 만들어 놓고 색깔, size?에 따라 extend해서 쓰면 좋을 것 같다

1
2
3

const Anchor = Button.withComponent("a").extend`
  text-decoration: none;
`;

animation

injectGlobal과 마찬가지로 keyframes모듈을 가지고 온 후 css 와 마찬가지로
from , to로 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 ${props => {
    if (props.danger) {
      return `animation: ${rotation} ${props.rotationTime}s linear infinite`;
    }

const rotation = keyframes`
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
`;
+

themeProvider

1
2
3
4
5
6
7

 <ThemeProvider theme={theme}>
        <Container className="App">
          <Form />
        </Container>
  </ThemeProvider>

themeProvider 하위에 있는 theme props로 받은 css 값들은 어디서나 쓸 수 있다 !!!

mixin and Attributes

• mixin keyFrame or injectGlobal처럼 css모듈을 가지고 옵니다

nesting

nesting 사스와 같이 &로 쓸 수 있고 컴포넌트를 선택할 때는 ${}아래와 같이 선택하고 기존 네스팅 문법과 같이 스타일을 입력하면 됩니다 lastchild 이런 것도 쓸 수 있음

1
2
3
4
5
6
7
8

const Container = styled.div`
  height: 100vh;
  width: 100%;
  background-color: #bdc3c7;
  ${Card}:last-child {
    background-color: red;
  }
`

react-native

react-native-web

Nicolas가_만든_style

1
2

input 지원범위 required 5.0 10.0 4.0 5.0 9.6 ie10이상 이건 무조건 채워야 한다.
속성을 쓰거나

피커 SignupPage 퍼블리싱 작업

배운 부분

expo linear-gradient쓸 떄 @types/expo 설치해야 됨 !

스타일드 컴포넌트 모듈들… 좀 중구난방으로 섞여있다. 처음 설계 부터 기본 부품을 잘 만들어 놓고 여기 저기서 쓰게 끔

전체 페이지를 쭈욱 보면서 설계할 필요성 !

• 이슈
  TextInput에 underLine이 그어지는데 기본 TextInput에는 라인이 없는데… 왜 계속 생기는지 … 디버깅이 어렵다 찍어보면 어디서 잘 못 됬는지 알기 좋을 텐데 genyMotion인가 이걸 깔아야 겠다
  

추가로 해야 되는 부분
1.아래 Link와 Text가 섞여 있는 부분 줄 바꿈 처리 및 이상하게 뒤섞여 있는데 어떻게 처리할지

… 시간 너무 오래걸렸다.

아쉬운 부분

1. import { LinearGradient } from ‘expo’; expo 모듈 linearGradient -> styled-component로는 계속 에러가 나서 작업을 못했는데… 분명 있을 것도 같은데 다시 알아봐야 겠다.
2. linkedInText
   link랑 Text … 섞여 있는 부분을 그냥 이렇게 처리 했는데 심지어 컨테이너랑 기본 Text들 아직… styledComponent로는 바꾸지도 않음.. 스타일드 컴포넌트 왜 쓴겨

원하는 부분 줄바꿈을 해주고 싶은데 어떻게 처리해야 하는지와 Text와 Link가 섞여 있을 때 한 컴포넌트로 props로 받아서 처리하려면 어떻게 해야 할까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<View style={{paddingLeft: 30, paddingRight:30}}>
   <Text style={{color: '#fff',lineHeight: 15, fontSize: 11, textAlign: 'center'}}>
     가입하기 버튼을 누름으로써, 
     <Anchor color="#fff" text="개인정보 보호 정책" url="https:google.com"/>과 
     <Anchor color="#fff" text="서비스 이용약관" url="https:google.com"/>
     에 모두 동의합니다
   </Text>
 </View>


 <Container>
   {props.Text}
   {props.anchor}
   {props.anchor}
 </Container>
 ??? element로 받아서 처리하는 것이 깔끔했을 것 같은데 내일 다시 짤 때는 조금 더 refactoring하자 !