이 코드에서는 props.rounded 값을 참조해 삼항연산자를 통해 이 값이 true면 styles.rounded를 적용하고 그렇지 않으면 null을 설정해 아무 스타일도 적용되지 않도록 처리했습니다.

코드를 조금 더 짧게 작성하고 싶으면 다음과 같이 수정할 수 있습니다.

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

이와 같이 코드를 작성하면 props.rounded 값이 true일 때는 styles.rounded 스타일을 적용하고, false일 때는 아무 스타일도 적용하지 않습니다.

이제 App 컴포넌트에서 Box 컴포넌트의 rounded Props를 설정해봅시다.

App.js

import React from 'react';
import {SafeAreaView} from 'react-native';
import Box from './components/Box';

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

export default App;