Basic style_ReactNative

miin·2023년 5월 28일

ReactNative

목록 보기

2/10

기본적으로 flex를 따로 기입할 필요가 없다
View 자체가 Flex Container이다
flex-direction의 기본값은 column이다
overflow가 있다고 해서 스크롤이 되지는 않음
반응형을 위해 width, height를 따로 주지 않고, flex: (숫자)를 사용(부모에 flex: 숫자를 주는 것은 필수)

기본적인 문법

각 스타일 구문은 ;가 아닌 ,로 한다
숫자를 제외한 속성값에는 따옴표''를 붙여야한다
속성명의 단어구분은 하이픈이 아닌 카멜케이스를 사용한다
사이즈단위를 생략한다
선택자 사용에 앞에.을 붙이지 않는다

축약형이 존재하지 않는다

마진이나 패딩의 경우 축약형 대신 상하,좌우 값을 한번에 적용할 수 있는 속성이 존재한다(marginVertical, paddingHorizontal 등)

CSS

.item {
    flex: 1 1 auto;
    margin: 0 4px 0 6px; 
}

item: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 'auto',
    marginVertical: 0,
    marginBottom: 4,
    marginLeft: 6,
}

스타일 우선 순위가 CSS와 다르다

RN은 스타일을 props로 전달하기 때문에 inline방식이나 internal, external에 의미가 없고 선택자, 구체성에 따른 우선 순위도 고려하지 않는다
우선순위에 영향을 주는 딱 한 가지는 컴포넌트에 스타일을 전달할 때 나중에 전달하는 스타일이 항상 우선순위가 높다는 것이다

CSS/HTML

.bigBlue {
  color: blue;
  font-weight: bold;
  font-size: 30px;
}
.red {
  color: red;
}
<div class="red bigBlue">red, not blue</div>

결과: color: red

bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
},
red: { 
    color: 'red',
}
render() {
return (
    // 여러개의 스타일을 전달할 때 배열을 이용한다.
    <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
);
}

결과: color: blue(스타일 선언 순서와 상관 없이 blue값이 적용된다. red값이 먼저 전달된 후 blue값이 갱신 됨)

의사클래스(가상 클래스), 가상요소, 형제 선택자, 자식 선택자 등을 사용할 수 없다

RN의 스타일은 :first-child, :nth-child, :focus 등의 의사 클래스, 자식선택자(>), 형제 선택자(+)와 가상요소( ::before, ::after ), attribute를 이용한 속성 선택자 등을 제공하지 않음

RN에서 선택 스타일링을 주고자할 때
 <View>
          {
            data.map((item, index) => (
              <View 
                style={[
                  styles.item,
                  (index === 0) && { borderTopWidth: 0 }, // CSS: first-child
                  (index % 2 === 1) && { backgroundColor: '#eee' } // CSS: nth-child(even)
              ]}>
                <Text>{item.name}</Text>
                <Text>{item.price}</Text>
              </View>
            ))
          }
        </View>
map함수와 index를 이용해 첫 번째와 짝수번째 item에 스타일을 적용하였다. 위 방법은 map을 사용하기 때문에 데이터 배열이 필요하기 때문에 데이터를 사용하지 않는 디자인적인 요소라면 의미없는 배열을 사용해야한다.
또한 item들이 서로 관련되어 있지 않아 map함수와 index의 활용이 어렵다면 사용하기 힘든 단점이 있다

줄바꿈

템플릿 리터럴 사용

<Text>{`첫번째 줄
두번째 줄`}
</Text>

{\n}로 둘러싸기

<Text>첫번째 줄{'\n'}두번째 줄</Text>

구성 요소를 분리하기

<Text>첫번째 줄</Text>
<Text>두번째 줄</Text>

스크립트의 장점을 활용할 수 있다

자주 사용하는 값이나 관련있는 수치들을 변수로 사용하면 코드 관리가 용이하다
또 스타일 코드 내에 분기 로직을 삽입할 수 있다 안드로이드와 ios 양 쪽 모두 개발을 진행할 경우 스타일 분기가 필요할 때가 있는데 스타일 내부에 os분기를 사용하면 주석을 남기지 않더라도 분기 내용을 파악할 수 있어 협업이나 유지보수에 도움이 된다

import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});