[React-Native] 10. Pressable

1. 모바일에서의 터치 상호작용하기

모바일에서 터치를 할 때 어떠한 액션, 상호작용을 할 필요가 있다.

예를들어 터치를 해서 TodoList에서 목록을 지우거나 하는 상황

이를 해결 하기 위해서는 React-Native에서 기본적으로 제공되는 Pressable이라는 컴포넌트를 사용하면 된다.

2. Pressable 사용법

기존에는 다른 컴포넌트로 사용하였지만 최근 React-Native 버전에서는 Pressable로 통일해서 사용한다.

우선 app.js에서 Delete 함수를 만들어준다.

app.js

function deleteGoalHandler(id){
  setCourseGoals((currentCourseGoals) => {
    return currentCourseGoals.filter((goal) => goal.id !== id)
  })
}

<GoalItem id={itemData.item.id}/>

filter 메소드를 이용해서 기존 state의 id값과 선택된 아이디값이 다른 것들만 남도록 만들었다.

이제 GoalItem.js에 가서 수정을 해준다.

//GoalItem.js
<View style={styles.goalItem}>
      <Pressable
        android_ripple={{ color: "#dddddd" }}
        onPress={props.onDeleteItem.bind(this, props.id)}
        style={({ pressed }) => pressed && styles.pressedItem}
      >
        <Text style={styles.goalText}>{props.text}</Text>
      </Pressable>
    </View>

Pressable로 감싸주고 onPress에 props로 넘어온 onDeleteItem함수를 넣어준다.

이후에 함수를 바인딩 해주는데 .bind메소드를 이용해서 간단하게 바인딩해줄 수 있다.

.bind함수의 첫번째 인자로 this 즉 onDeleteItem 자신을 바인딩 해주고 onDeletItem의 인자로 props.id를 넣어주면 클릭시 삭제되는 것을 볼 수 있다.

3. 스타일링 하기

앱에서 삭제를 할 때 어떠한 UI없이 삭제를 하면 매우 보기가 안좋다.

그렇기 때문에 삭제시 필요한 스타일을 주어서 이게 삭제가 되는 것이란 걸 알려주면 좋을 거 같다.

// GoalItem.js

<Pressable
        android_ripple={{ color: "#dddddd" }}
        onPress={props.onDeleteItem.bind(this, props.id)}
        style={({ pressed }) => pressed && styles.pressedItem}
      >

안드로이드의 경우는 매우 간단하게 설정할 수 있다.

Pressable의 프로퍼티에 android_ripple이라는 것을 불러오고 옵션을 주면 된다.

이는 클릭시 물결모양으로 나타나는 것이다.

하지만 IOS에서는 다른 방식으로 사용해야 한다.'

Pressable자체에 style을 주고 Pressable이 위와 같이 설정해준다.

styles.pressedItem은 설정해주어야 한다.

위와 같이 설정하면 pressed가 되었을 때 styles.pressedItem을 적용하라고 명령할 수 있다.

4. bind없이 기능 구현

//GoalItem.js
<View style={styles.goalItem}>
      <Pressable
        android_ripple={{ color: "#dddddd" }}
        onPress={props.onDeleteItem.bind(this, props.id)}
        style={({ pressed }) => pressed && styles.pressedItem}
      >
        <Text style={styles.goalText}>{props.text}</Text>
      </Pressable>
    </View>

위를 bind 없이 구현하는 방법은 다음과 같다.

function test(){
  props.onDeleteItem(props.id)
}
<View style={styles.goalItem}>
      <Pressable
        android_ripple={{ color: "#dddddd" }}
        onPress={test}
        style={({ pressed }) => pressed && styles.pressedItem}
      >
        <Text style={styles.goalText}>{props.text}</Text>
      </Pressable>
    </View>