[React Native] Button Component

컴포넌트

재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소 (ex. 제목, 입력창, 할 일 목록)

단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)나 자신의 상태(state)에 따라 다양한 기능을 수행

 

와이어프레임

최종 화면에 구성될 콘텐츠를 간단히 요약해서 보여주는 것

 

1. 내장 컴포넌트

RN에서는 다양한 내장 컴포넌트를 제공한다. 아래 링크에서 확인 가능하다.

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

예시) View, Text etc...

 

만약 Button 컴포넌트를 사용하려고 하면 아래 링크에서 기본적인 사용방법을 알 수 있다.

https://reactnative.dev/docs/button

Button · React Native

예시 코드)

<Button title="Button" onPress={() => alert('Click!!!')}></Button>

• title : 버튼 내부에 출력되는 텍스트
• onPress : 버튼이 눌렸을 때 호출되는 함수 지정
• 위 두 가지 속성은 필수로 입력해야 한다.

doc을 보면 iOS와 Andriod의 차이를 알 수 있다.

서로의 default 값도 다르고 text의 색인지 background의 색인지 나타내는 것도 다르다.

 

2. 커스텀 컴포넌트

custom component를 사용해서 위와 같이 안드로이드와 iOS에서 다른 모습으로 랜더링 되는 것을 보안할 수 있다.

 

1) TouchableOpacity 사용하기

https://reactnative.dev/docs/touchableopacity

TouchableOpacity · React Native

• 버튼을 누르면 색이 약해지고 하얀색으로 변한다.
• TouchableWithoutFeedback 컴포넌트를 상속받았기 때문에 onPress 속성 사용 가능

    <TouchableOpacity
      style={{
        backgroundColor: '#f56464',
        borderRadius: 10,
        margin: 10,
        padding: 10,
      }}
    >
      <Text style={{ fontSize: 24, color: 'white' }}>
        TouchableOpacity Button!
      </Text>
    </TouchableOpacity>

 

2) TouchableHighlight 사용하기

https://reactnative.dev/docs/touchablehighlight

TouchableHighlight · React Native

• 누르면 검은색으로 변한다.
• TouchableWithoutFeedback 컴포넌트를 상속받았기 때문에 onPress 속성 사용 가능
• 코드는 TouchableOpacity와 이름만 다르고 동일하다.

 

3) Pressable 사용하기

https://reactnative.dev/docs/pressable

Pressable · React Native

• 리액트 네이티브 0.63 버전부터 기존의 TouchableOpacity 컴포넌트를 대체하는 컴포넌트로 추가되었다.
• TouchableOpacity와의 공통점 : 사용자의 터치에 상호 작용하는 컴포넌트로 press 이벤트도 동일하게 존재하고 동작 방식도 동일하다. 
• TouchableOpacity와의 차이점 : HitRect 와 PressRect

HitRect, PressRect 란?

HitRect

사람마다 손의 크기나 두께가 다르기 때문에 모바일의 작은 화면에서 누군가는 버튼을 정확하게 클릭하는 것이 어려울 수 있다. 따라서 버튼 모양보다 약간 떨어진 부분까지 눌러도 이벤트가 발생하도록 만들기 위해 사용하는 것이다.

PressRect

누구나 한번쯤 버튼을 클릭하고 해당 버튼이 동작하지 않게 하기 위해 버튼을 누른 상태에서 손가락을 이동시킨 경험이 있을 것이다. 이런 경우 얼마나 멀어져야 버튼을 누른 상태에서 벗어났다고 판단할 수 있을지 개발자가 조절할 수 있도록 만든 기능이다. 

사용방법

위의 docs 참고. HitRect는 hitSlop을 통해, PressRect는 PressRetentionOffset 값을 통해 조절할 수 있다. 

 

단점 : TouchableOpacity나 TouchableHighlight는 따로 애니메이션 효과를 안 줘도 알아서 눌렀을 때 피드백이 있는데, Pressable은 따로 애니메이션 효과를 줘야 한다. 문서 예시 코드처럼 스타일로 적용해도 되지만 나는 안드로이드 기기라서 andriod_ripple 속성을 사용했다. 

 

andriod_ripple이라는 속성을 주면 눌렀을 때 효과가 나온다. ripple 속성 값은 문서에 자세하게 나와있다.

<Pressable
      style={{
        backgroundColor: '#095205',
        borderRadius: 10,
        margin: 10,
        padding: 10,
      }}
      onPress={() => alert('Pressable')}
      android_ripple={{ color: 'white' }}
    >
      <Text style={{ fontSize: 24, color: 'white' }}>Pressable Button!</Text>
    </Pressable>

3가지 커스텀 컴포넌트 버튼

 

참고)

https://mahyarmohammadi.medium.com/react-native-pressable-vs-touchable-5fec6b332f15

Pressable vs. Touchable in React Native