[React-Native] 13. 버튼 개선하기

1. 피드백 없는 버튼 개선하기

우선 버튼에 피드백이 없으면 이게 버튼이 눌린건지 가만히 있는건지 잘 모를 수 있다.

그러니 버튼에 피드백을 줘서 버튼이 눌렸다는 것을 표시해줄 필요성이 있다.

function PrimaryButton({ children }) {
  function pressHandler() {
    console.log("pressed");
  }
  return (
    
      <Pressable
        onPress={pressHandler}
      >
        <View>
        <Text style={styles.buttonText}>{children}</Text>
</View>
      </Pressable>
  );
}

export default PrimaryButton;

기본적인 버튼 모양이다.

당연하게도 눌렸을 때 아무런 반으이 없다.

이를 좀 예쁘게 개선해보고자 한다.

2. Style

일단 눌리고 나발이고 먼저 커스텀을 해볼 것이다.

상위 컴포넌트는 무시하고 현재의 버튼 컴포넌트만 보도록 하자

function PrimaryButton({ children }) {
  function pressHandler() {
    console.log("pressed");
  }
  return (
 <View style={styles.buttonOuterContainer}>
      <Pressable
        style={({ pressed }) =>
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
        onPress={pressHandler}
        android_ripple={{ color: "#cdcd32" }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>
}

export default PrimaryButton;

const styles=styleSheet.create({
	buttonOuterContainer: {
    borderRadius: 28,
    margin: 4,
    overflow: "hidden",
  },

  buttonInnerContainer: {
    backgroundColor: "#72063c",
    paddingVertical: 8,
    paddingHorizontal: 16,
    elevation: 2,
  },
  buttonText: {
    color: "white",
    textAlign: "center",
  },
  pressed: {
    opacity: 0.75,
  },
})

View컨테이너와 Pressable컴포넌트의 위치를 변경한 이유는 눌렸을 때 그림자 효과가 밖으로 빠져나오기 때문이다.

3. 피드백 주기

우선 안드로이드와 IOS가 다르게 동작한다.

안드로이드의 경우
android_ripple={{ color: "#cdcd32" }}로 줘서 클릭했을 경우 물결 효과를 줄 수 있다.

매우 쉬움

IOS의 경우 조금 복잡하다.

예전에 style에는 함수나 조건을 줄 수 있다고 배웠다.

그래서
style={({ pressed }) => pressed ? [styles.buttonInnerContainer, styles.pressed] : styles.buttonInnerContainer }
를 주었다.
여기서 pressed는 기본 제공하는 프로퍼티로 Pressable이 눌렸는지 안눌렸는지 확인 할 수 있다.

이제 Pressable이 눌렸을 경우 즉 pressed가 넘어왔을 경우에 삼항연산자로 조건을 줘서 pressed가 되었을 경우 []로 style객체를 집어넣어 줬다.

IOS에서 버튼에 피드백을 주는 방법이다.