React Native 의 컴포넌트 & Styling

Component 란?

직역하면 구성요소 라는 의미입니다. 

프론트엔드에서 컴포넌트는 유저인터페이스를 구성하는 요소입니다.

이런 컴포넌트는 단순히 보이는 것 뿐만 아니라, 사용자가 어떤 행동을 취했을 때 어떤 작업을 할지도 설정합니다.

RN의 기본적인 컴포넌트

<SafeAreaView> // Iphone X 이상 기종에서 디스플레이의 보이지 않는 영역 & 최하단영역 에 내용이 보여지는 것을 방지합니다
<View> // 기본적인 레이아웃 & 스타일
<Text> // 텍스트를 보여주는 역할

Default Props

props를 생략했을 때 default 값을 지정해 줍니다.

function Greeting({name}) {
  return (
    <View>
      <Text>안녕하세요! {name}!</Text>
    </View>
  );
}

Greeting.defaultProps = {
  name: '기본 이름',
};

StyleSheet

리액트 네이티브에서는 웹 에서와 똑같이 css 를 적용합니다.

하지만 조금 다른점이 몇가지 있습니다.

1. 모든 스타일 속성은 camelCase 이다.
2. display는 flex, none 두 가지 뿐이며, default는 flex이다.
3. flexDirection의 기본값은 column이다.(web에서는 row)
4. 숫자 단위는 dp 뿐이다.
5. background 대신 backgroundColor 을 사용해야한다.
6. border 대신 borderWidth, borderStyle, borderColor 로 따로 설정해주어야 한다.

style 여러개 적용하기

style props에 배열로 넘겨줍니다

function Box() {
  return <View style={[styles.box, styles.rounded]} />;
}

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: '#888',
  },
  rounded: {
    borderRadius: 16,
  },
});

export default Box;

conditional하게 스타일을 주고 싶다면

<View style={[styles.box, rounded ? styles.rounded : null]} />
<View style={[styles.box, rounded && styles.rounded]} />

다양한 크기 구현하기

function Box({rounded, size}) {
  return <View style={[styles.box, rounded && styles.rounded, sizes[size]]} />;
}

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: '#888',
  },
  rounded: {
    borderRadius: 16,
  },
  small: {
    width: 32,
    height: 32,
  },
  medium: {
    width: 64,
    height: 64,
  },
  large: {
    width: 128,
    height: 128,
  },
});

const sizes = {
  small: styles.small,
  medium: styles.medium,
  large: styles.large,
};

객체로 바로 추가하기

function Box({rounded, size, color}) {
  return (
    <View
      style={[
        styles.box,
        rounded && styles.rounded,
        sizes[size],
        {backgroundColor: color},
      ]}
    />
  );
}

전체 영역 차지하기

flex 속성을 그대로 사용하면된다.

flex:1 을 지정해주면, shrink,grow 가 1로 설정되면서, 화면 전체를 차지하는 효과가 난다.

<SafeAreaView style={{flex: 1, backgroundColor: 'cyan'}}>

</SafeAreaView>