React Native에서 재사용 가능한 커스텀 컴포넌트 만들기

React Native에서는 나만의 커스텀 컴포넌트를 만들고 이를 재사용할 수 있습니다. 기본적인 컴포넌트 구조, Props와 State 활용법, 그리고 실제 프로젝트에서의 사용 예시까지, 커스텀 컴포넌트에 대해 살펴보겠습니다.

 

React Native 커스텀 컴포넌트란 무엇인가?

React Native를 처음 시작했을 때, 저는 대부분 기본 컴포넌트들(Text, View, Button 등)을 사용했습니다. 프로젝트의 규모가 커지면서, 매번 같은 UI를 반복해서 작성하는 것이 비효율적이라는 것을 깨달았고, 고객의 요청 사항을 반영함에 있어서도 한계가 있다는 것을 느끼게 되었습니다. 그때부터 커스텀 컴포넌트의 필요성을 느꼈습니다. 커스텀 컴포넌트는 코드의 재사용성을 높이고, 더 읽기 쉽게 구조화된 코드를 작성할 수 있게 해줍니다.

커스텀 컴포넌트의 정의

커스텀 컴포넌트란 개발자가 필요에 맞게 정의한 컴포넌트로, 여러 곳에서 재사용할 수 있도록 설계된 React 컴포넌트를 말합니다. 예를 들어, 여러 화면에서 사용될 수 있는 나만의 커스텀 버튼이나 입력 폼을 만들 수 있습니다. 이를 통해 코드를 보다 효율적으로 관리할 수 있으며, 유지보수가 쉬워집니다.

왜 커스텀 컴포넌트를 사용하는가?

커스텀 컴포넌트를 사용하면 코드의 중복을 줄일 수 있어 개발 속도가 빨라지고, 유지보수가 쉬워집니다. 또한, 조직 내에서 공통된 스타일을 일관되게 유지할 수 있기 때문에 프로젝트 전반에 걸쳐 UI의 일관성을 유지할 수 있습니다.

 

React Native에서 커스텀 컴포넌트의 기본 구조

함수형 컴포넌트 vs 클래스형 컴포넌트

React Native에서 커스텀 컴포넌트를 만들기 위해서는 먼저 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 이해해야 합니다. 함수형 컴포넌트는 간결하고, 상태 관리가 필요하지 않은 경우 사용하기 좋았었습니다. 반면 클래스형 컴포넌트는 상태(State)를 다루거나 라이프사이클 메서드를 활용해야 할 때 적합합니다.

 

하지만 React 16.8 이후, React Hooks의 도입으로 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되면서, 함수형 컴포넌트를 사용하는 경우가 많아졌습니다. 저도 처음에는 상태 관리 이점때문에 클래스형 컴포넌트를 사용했지만, Hooks를 알고 나서는 함수형 컴포넌트를 주로 사용하고 있습니다.

기본적인 컴포넌트 구조 만들기

커스텀 컴포넌트를 만들 때는 먼저 기본적인 구조를 이해하는 것이 중요합니다. 아래는 간단한 커스텀 컴포넌트의 예시입니다.

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

const CustomComponent = () => {
	return (
		<View style={styles.container}>
			<Text style={styles.text}>Hello, this is a custom component!</Text>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		padding: 10,
		backgroundColor: '#f0f0f0',
	},
	text: {
		fontSize: 16,
		color: '#333',
	},
});

export default CustomComponent;

 

위의 예제에서 CustomComponent는 간단한 텍스트를 보여주는 커스텀 컴포넌트입니다. 이처럼 기본적인 구조를 가진 컴포넌트를 작성한 후, 이를 다양한 화면에서 재사용할 수 있습니다.

 

커스텀 컴포넌트 만들기 실습

첫 번째 커스텀 버튼 컴포넌트 만들기

이제 간단한 버튼 컴포넌트를 만들어 보겠습니다.

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

const CustomButton = ({ title, onPress, color = '#6200ee' }) => {
	return (
		<TouchableOpacity style={[styles.button, { backgroundColor: color }]} onPress={onPress}>
        	<Text style={styles.text}>{title}</Text>
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({
	button: {
		padding: 10,
		borderRadius: 5,
		alignItems: 'center',
	},
	text: {
		color: '#fff',
		fontSize: 16,
	},
});

export default CustomButton;

 

위의 코드에서 CustomButton 컴포넌트는 title, onPress, color라는 props를 받아 다양한 상황에 맞게 사용할 수 있도록 했습니다. 이로 인해 동일한 버튼을 다양한 스타일과 기능으로 재사용할 수 있습니다.

Props와 State 사용하기

커스텀 컴포넌트를 작성할 때, Props와 State는 중요한 역할을 합니다. Props는 컴포넌트 외부에서 전달되는 데이터이며, 이를 통해 컴포넌트의 동작을 다르게 설정할 수 있습니다. 위의 CustomButton에서 title, onPress, color가 모두 Props의 예입니다.

 

State는 컴포넌트 내부에서 관리되는 데이터입니다. 예를 들어, 버튼 클릭 횟수를 표시하는 컴포넌트를 만들고 싶다면 State를 사용할 수 있습니다.

import React, { useState } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const ClickCounterButton = () => {
	const [count, setCount] = useState(0);
    
	return (
		<TouchableOpacity style={styles.button} onPress={() => setCount(count + 1)}>
			<Text style={styles.text}>Clicked {count} times</Text>
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({
	button: {
		padding: 10,
		borderRadius: 5,
		backgroundColor: '#6200ee',
		alignItems: 'center',
	},
	text: {
		color: '#fff',
		fontSize: 16,
	},
});

export default ClickCounterButton;

 

위의 ClickCounterButton 컴포넌트는 클릭할 때마다 count 상태가 증가하며, 이를 통해 상태 관리의 기본적인 개념을 이해할 수 있습니다.

스타일링 및 재사용성 향상

React Native에서 스타일링은 매우 중요합니다. StyleSheet를 사용하여 스타일을 정의하고, 이를 props로 받아 동적으로 스타일을 변경할 수 있습니다. 예를 들어, 버튼의 크기나 색상을 다양한 상황에 맞게 재사용할 수 있도록 만들 수 있습니다.

 

고급 커스텀 컴포넌트 만들기

컴포넌트 내에서 이벤트 핸들링

커스텀 컴포넌트를 만들 때, 이벤트 핸들링은 필수적인 요소입니다. 버튼 클릭, 입력 필드의 변경 등 다양한 이벤트를 처리할 수 있도록 컴포넌트를 설계하면, 다양한 시나리오에서 재사용할 수 있습니다. 예를 들어, 입력 필드 컴포넌트에서 onChangeText 핸들러를 추가하여 사용자의 입력을 처리할 수 있습니다.

하위 컴포넌트와의 데이터 교환

React에서는 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달하는 방식으로 구성됩니다. 이를 통해 여러 컴포넌트 간 데이터를 주고받으며 복잡한 UI를 구성할 수 있습니다. 예를 들어, 리스트 컴포넌트와 리스트 아이템 컴포넌트를 만들고, 리스트 컴포넌트에서 데이터를 하위 아이템으로 전달할 수 있습니다.

 

마무리하며

React Native에서 커스텀 컴포넌트를 만드는 것은 코드의 재사용성과 유지보수성을 크게 향상시키는 중요한 방법입니다. 커스텀 컴포넌트를 사용하면 UI의 일관성을 유지하고, 코드의 중복을 줄여 개발 속도를 높일 수 있습니다. React Native에서 커스텀 컴포넌트를 효과적으로 활용해서 더 효율적이고 유지보수하기 쉬운 모바일 앱을 개발해 봅시다.