[리액트 네이티브] 커스텀 컴포넌트 만들기와 활용

안녕하세요 여러분! 이번 포스팅에서는 리액트 네이티브에서 커스텀 컴포넌트를 만들어 사용하는 방법에 대해 알아보겠습니다. 리액트 네이티브에서 제공하는 기본 컴포넌트 외에도 사용자가 직접 만든 컴포넌트를 사용하여 애플리케이션의 디자인과 기능을 확장할 수 있습니다. 이 글에서는 간단한 예제를 통해 커스텀 컴포넌트를 만들고 사용하는 방법을 설명할 것입니다.

 

React Native

커스텀 컴포넌트란?

커스텀 컴포넌트는 개발자가 직접 만든 재사용 가능한 리액트 네이티브 컴포넌트입니다. 기본적으로 제공되는 컴포넌트만으로는 충분하지 않거나 특정한 기능이 필요한 경우에 커스텀 컴포넌트를 만들어 사용할 수 있습니다. 커스텀 컴포넌트를 사용하면 코드의 재사용성을 높일 수 있으며, 애플리케이션의 구조와 디자인을 효율적으로 관리할 수 있습니다.

 

간단한 예제: 카운터 컴포넌트 만들기

이제 리액트 네이티브의 커스텀 컴포넌트를 만들어보겠습니다. 이 예제에서는 간단한 카운터 기능을 가진 컴포넌트를 만들어 사용하는 방법을 소개합니다.

 

1. 커스텀 컴포넌트 생성

먼저, Counter.js라는 새 파일을 생성하여 카운터 컴포넌트의 코드를 작성합니다.

// Counter.js
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TouchableOpacity onPress={handleDecrement} style={{ backgroundColor: 'red', padding: 10, borderRadius: 5 }}>
        <Text style={{ fontSize: 18, color: 'white' }}>-</Text>
      </TouchableOpacity>
      <Text style={{ fontSize: 24, marginHorizontal: 20 }}>{count}</Text>
      <TouchableOpacity onPress={handleIncrement} style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5 }}>
        <Text style={{ fontSize: 18, color: 'white' }}>+</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Counter;

코드를 분석해보면 다음과 같습니다.

 

- useState 훅을 사용하여 카운터 상태를 관리합니다. 초기 카운터 값은 0으로 설정합니다.

const [count, setCount] = useState(0);

 

- 증가(handleIncrement) 및 감소(handleDecrement) 함수를 정의합니다. 이 함수들은 각각 카운터 값을 1 증가시키거나 감소시킵니다.

const handleIncrement = () => {
  setCount(count + 1);
};

const handleDecrement = () => {
  setCount(count - 1);
};

 

- 렌더링 부분에서는 View 컴포넌트를 사용하여 감소 버튼, 카운터 값, 증가 버튼을 가로로 배치합니다. flexDirection: 'row' 스타일을 사용하여 요소들을 가로로 배열합니다.

<View style={{ flexDirection: 'row', alignItems: 'center' }}>

 

- 감소 및 증가 버튼은 TouchableOpacity 컴포넌트를 사용하여 구현합니다. 이 컴포넌트에는 onPress 이벤트를 연결하여 각각 handleDecrement 및 handleIncrement 함수를 호출하도록 합니다. 버튼 스타일은 backgroundColor, padding, borderRadius 등의 속성을 사용하여 설정합니다.

<TouchableOpacity onPress={handleDecrement} style={{ backgroundColor: 'red', padding: 10, borderRadius: 5 }}>
  <Text style={{ fontSize: 18, color: 'white' }}>-</Text>
</TouchableOpacity>

 

- 카운터 값은 Text 컴포넌트를 사용하여 표시하며, fontSize와 marginHorizontal 스타일을 적용하여 적절한 크기와 여백을 설정합니다.

<Text style={{ fontSize: 24, marginHorizontal: 20 }}>{count}</Text>

 

마지막으로, 컴포넌트를 외부에서 사용할 수 있도록 export default Counter;를 추가하여 Counter 컴포넌트를 내보냅니다.
이제 이 카운터 컴포넌트는 다른 파일에서 임포트하여 사용할 수 있습니다. 커스텀 컴포넌트를 만들 때 이와 같은 패턴을 사용하면 코드의 재사용성을 높일 수 있고, 애플리케이션의 구조와 디자인을 효율적으로 관리할 수 있습니다.

리액트 네이티브에서 커스텀 컴포넌트를 만들고 사용하는 방법을 배웠습니다. 이 기술을 활용하여 필요한 만큼 커스텀 컴포넌트를 생성하고, 애플리케이션의 기능을 확장해 보세요. 다양한 컴포넌트를 만들어 앱의 디자인과 사용성을 높일 수 있습니다.

이 글이 리액트 네이티브에서 커스텀 컴포넌트를 만들고 사용하는 데 도움이 되었기를 바랍니다. 다음 글에서는 더 고급 기능과 최적화에 대해 다룰 예정입니다. 기대해 주세요! 만약 추가 질문이나 의견이 있으시면 언제든지 댓글로 남겨 주세요. 감사합니다!