컴포넌트 스타일링

1. React-Native에서 CSS 스타일링을 하는 방법이 3가지가 있다. 

(1) inline 스타일

이런 식으로 태그 안에다가 적어주는 것 

양이 많아지면 가독성이 떨어지지만, 반대로 양이 적으면 가독성이 오히려 높다. 

 

(2) StyleSheet 써서 내용 밑으로 빼기 

양이 많아질 경우, 이렇게 사용하면 가독성이 높아진다. 

 

(3) expo에서 제공하는 기능인 styled Component 사용 

이건 컴포넌트인데 안에 CSS 기능을 넣을 수 있는 것이다. 

a.장점은 

컴포넌트를 사용하는 것 이므로, 컴포넌트 이름을 내가 쓰려는 CSS에 맞게 바꿀 수 있다. 

이는 컴포넌트만 보아도 해당 함수가 어떻게 꾸며질 것인지 알 수 있어 가독성이 높아진다. 

 

b. 형태

(1) styled.View 혹은 Image, Text를 쓰면 된다. 

그러면 해당 태그는 각각 <View>,<Image>,<Text>로서의 역할과 기능 모두 다 사용할 수 있다.

styleView ` `; 이 형태를 써야 한다.

 

(2) CSS 와 달리 스타일링 사이에 구분자는 , 가 아니라 ; 이다.

(3) 인자 받아 사용하는 것은 ${}을 쓰면 된다. 

      ${(props) => props.size} 는 태그의 속성들을 다 받아서 그 중에 size를 쓰겠다는 뜻이다.

(4) CSS와 다르게 여기는 크기의 단위를 꼭 써줘야 한다. 

(5) CSS와 다르게 "row"나 "white" 같이 String에 따옴표 써줄 필요 없이 그냥 쓰면 된다.  

2. 스스로 해보기

${}안은 교황청 처럼 불가침 지역이다. 

이 녀석이 있는 곳의 문법이 통하지 않는다. 

아까 전에 styled-Component는 "" 필요 없다 했지만 ${} 안이라면 적어줘야 한다.