내가 만드는 앱의 "세로상자"를 자동화하기
"세로상자"
이번에는 조금 특이하게 세로로 나열하는 상자 컴포넌트를 만들려고 한다.
우선 상자의 이름을 정했다. "VStack"
코드를 작성해 본다.
파일경로: /src/ui/components/VStack.tsx
import React from 'react';
import {StyleSheet, View, ViewStyle} from 'react-native';
type VStackProps = {
children: React.ReactNode[];
gap?: number;
style?: ViewStyle;
};
const VStack = ({children, gap, style}: VStackProps) => {
return (
<View style={[styles.vstack, style]}>
{children.map((child, index) => (
<View
key={index}
style={[index < children.length - 1 && {marginBottom: gap}]}>
{child}
</View>
))}
</View>
);
};
export default VStack;
const styles = StyleSheet.create({
vstack: {
flexDirection: 'column',
},
});
이 코드를 자동으로 생성하기 위한 명령어를 만들어보자. 물론... ChatGPT가 모두 알려주었다.
파일경로: /automation/create_VStack.sh
#!/bin/bash
# 1. 파일 경로 설정
FILE_PATH="./src/ui/components/VStack.tsx"
DIR_PATH=$(dirname "$FILE_PATH")
# 2. 디렉토리 생성 (존재하지 않으면)
mkdir -p "$DIR_PATH"
# 3. TypeScript 파일 생성
cat <<EOF > "$FILE_PATH"
import React from 'react';
import {StyleSheet, View, ViewStyle} from 'react-native';
type VStackProps = {
children: React.ReactNode[];
gap?: number;
style?: ViewStyle;
};
const VStack = ({children, gap, style}: VStackProps) => {
return (
<View style={[styles.vstack, style]}>
{children.map((child, index) => (
<View
key={index}
style={[index < children.length - 1 && {marginBottom: gap}]}>
{child}
</View>
))}
</View>
);
};
export default VStack;
const styles = StyleSheet.create({
vstack: {
flexDirection: 'column',
},
});
EOF
echo "✅ VStack.tsx created at $FILE_PATH"
이제 터미널에서 명령어를 실행해 보았다.
sh automation/create_VStack.sh
잘 생성되었다...!
앞으로 세로로 나열하는 상자 레이아웃은 아무런 생각 없이 사용할 수 있겠지 ...
