[React Native] 2-5 Props로 컴포넌트 스타일 커스터마이징

먼저 이전에 만들었던 사각형을 모서리를 부드럽게 만들어 보겠습니다.

 

다음과 같이 코드를 수정합니다

 

import React from 'react';
import {View, StyleSheet} from 'react-native';

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


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


export default Box;

이렇게 모서리가 둥글둥글 해졌습니다.

 

앞서 말씀드린 것처럼 리액트 네이티브는 웹의 CSS와 다르게 수치가 하나이기 때문에 숫자만 입력하시면 됩니다.

 

이제 rounded라는 props가 true일 때만 이 스타일을 부여할 수 있도록 코드를 수정해보겠습니다.

 

import React from 'react';
import {View, StyleSheet} from 'react-native';

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

(...)

 

이 코드에서는 props.rounded 값을 참조하여 삼항연산자를 이용해 값이 true이면 적용할 수 있도록 작성하였습니다.

 

이제 App 컴포넌트로 가서 수정해보겠습니다.

 

import React from 'react';
import {SafeAreaView, Button, Text} from 'react-native';
import Box from "./components/box";

const App = () => {
  return (
    <SafeAreaView>
      <Box rounded={true} />
    </SafeAreaView>
  );
};

export default App;

 

<Box rounded /> 로 Boolean 타입의 Props를 설정할 때는 코드를 간소화 할 수 있습니다.

---

이번엔 다양한 크기와 색깔을 구현해 보겠습니다. 

 

Box 컴포넌트를 다음과 같이 수정하겠습니다.

 

import React from 'react';
import {View, StyleSheet} from 'react-native';

function Box(props) {
  return (
    <View
      style={[
        styles.box,
        props.rounded && styles.rounded,
        sizes[props.size],
        {backgroundColor: props.color},
      ]}
    />
  );
}
Box.defaultProps = {
  size: 'midium',
  color: 'black',
};
const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
  rounded: {
    borderRadius: 16,
  },
  small: {
    width: 32,
    height: 32,
  },
  midium: {
    width: 64,
    height: 64,
  },
  large: {
    width: 128,
    height: 128,
  },
});

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

export default Box;

StyleSheet에서 먼저 small, midium, large 스타일을 준비한 후 이 스타일들을 sizes라는 객체에 넣어줬습니다.

 

그 후 props.size 값을 받아와서 sizes[size]를 조회해 원하는 스타일을 선택하게 하였습니다.

 

또한 디폴트 값을 설정해 주었습니다.

 

색깔의 경우 props.color로 바로 받아와서 변경할 수 있도록 작성하였습니다.

 

그리고 이제 App컴포넌트를 수정해서 결과를 보겠습니다.

<Box rounded size = "large" color "red' />

다음과 같이 나타날 것입니다.

---

Props 객체 구조 분해 할당

 

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이 있습니다.

 

구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, 

 

'비구조화 할당'이라고 부르기도 합니다.

 

예를 들어 다음과 같은 코드가 있습니다.

 

const object = {
	a: 1,
    b: 2,
    c: 3
}

const a = object.a;
const b = object.b;
const c = object.c;

 

매번 하나하나 참조하여 선언하였습니다.

 

하지만 이런 방법도 있습니다.

 

const object = {
	a: 1,
    b: 2,
    c: 3
}

const {a,b,c} = object;

두 결과 값은 같습니다. 

 

그렇다면 이제 이 방법을 Box 컴포넌트에 사용하겠습니다.

 

import React from 'react';
import {View, StyleSheet} from 'react-native';

function Box({rounded, size, color}) {
  return (
    <View
      style={[
        styles.box,
        rounded && styles.rounded,
        sizes[size],
        {backgroundColor: color},
      ]}
    />
  );
}
Box.defaultProps = {
  size: 'midium',
  color: 'black',
};
const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
  rounded: {
    borderRadius: 16,
  },
  small: {
    width: 32,
    height: 32,
  },
  midium: {
    width: 64,
    height: 64,
  },
  large: {
    width: 128,
    height: 128,
  },
});

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

export default Box;