[question] Pressable, Touchable 컴포넌트를 활용한 Custom Button

[One-HyeWon]

어려웠던 점은 무엇인가요?

Pressable, Touchable 컴포넌트를 활용한 Custom Button을 어떻게 만들 수 있을까?

Section2 "React Native의 기초"에서 Button은 스타일을 세부적으로 조절하기 힘드니, 스타일을 많이 바꿔야 하면 Custom Button을 만들어보라고 하셨습니다.
어떻게 만들 수 있을 지 같이 생각해보면 좋을 것 같아요!
React에서 Web을 구현 할 때도, 공통 컴포넌트들은 custom 해서 common components로 분류해 두는 경우도 있으니, 미리 알아두면 나중에 유용할 것 같습니다.

---

해당 문제에 대한 본인의 생각을 작성해주세요.

Pressable, Touchable 컴포넌트를 활용한 Custom Button

1. Pressable 컴포넌트 활용

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

const CustomButton = () => {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed,
        isPressed && styles.buttonActive,
      ]}
      onPress={() => setIsPressed(!isPressed)}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
    >
      <Text style={styles.buttonText}>클릭</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4CAF50',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonPressed: {
    opacity: 0.8,
  },
  buttonActive: {
    backgroundColor: '#3e8e41',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default CustomButton;

설명:

• Pressable 컴포넌트를 사용하여 버튼을 구현합니다.
• onPress, onPressIn, onPressOut props를 활용하여 클릭 이벤트와 터치 이벤트를 처리합니다.
• style props를 사용하여 버튼 스타일을 지정하고, pressed 상태에 따라 스타일을 변경합니다.
• isPressed 상태를 사용하여 버튼이 활성화된 상태임을 표시합니다.

2. TouchableOpacity 컴포넌트 활용

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

const CustomButton = () => {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <TouchableOpacity
      style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed,
        isPressed && styles.buttonActive,
      ]}
      onPress={() => setIsPressed(!isPressed)}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
    >
      <Text style={styles.buttonText}>클릭</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4CAF50',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonPressed: {
    opacity: 0.8,
  },
  buttonActive: {
    backgroundColor: '#3e8e41',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default CustomButton;

설명:

• TouchableOpacity 컴포넌트를 사용하여 버튼을 구현합니다.
• Pressable과 마찬가지로 onPress, onPressIn, onPressOut props를 사용하여 이벤트를 처리합니다.
• style props를 사용하여 버튼 스타일을 지정하고, pressed 상태에 따라 스타일을 변경합니다.
• isPressed 상태를 사용하여 버튼이 활성화된 상태임을 표시합니다.

---

차이점:

Pressable은 TouchableOpacity보다 더 강력한 터치 이벤트 처리 기능을 제공합니다.

Pressable은 disabled prop을 통해 비활성화 상태를 지원합니다.

TouchableOpacity는 Pressable보다 덜 복잡하고 사용하기 쉽습니다.