[React Native] Todo 만들기 (FlatList)

미리보기

작업 폴더)

components
 ┣ GoalInput.jsx
 ┗ GoalItem.jsx
 
 App.js

 

 

Todo 리스트를 띄어주는 메인화면

 

'목표 추가'를 클릭하면 뜨는 모달 화면

 

 

 

 

기능)

- 목표 추가, 삭제(아이템 클릭 시)

- 모달 창 띄우기

 

 

 

FlatList 사용

- ScrollView와 달리,

- FlatList 는 화면에 보이는 일부 데이터만을 렌더링하고, 나머지 데이터는 필요한 순간에 동적으로 렌더링한다. 이는 데이터의 길이나 양이 가변적이며 예측하기 어려운 경우에 특히 적합합니다. 다시 말해, 화면에 보여지는 부분만을 처리하여 메모리와 성능을 효율적으로 관리할 수 있으며, 대규모 데이터 목록을 처리할 때 유용합니다.

 

 

사용)

 <FlatList
          data={courseGoals}
          renderItem={(itemData) => {
            return (
              <GoalItem
                text={itemData.item.text}
                onDelete={deleteGoalHandler}
                id={itemData.item.id}
              />
            );
          }}
          keyExtractor={(item, index) => {
            return item.id;
          }}
          alwaysBounceVertical={false}
        />

- data 속성에는 사용할 배열을 넣고 rederItem에는 map, filter와 같이 원소를 하나씩
배분하여 값을 넣어 하나씩 랜더링 할 수 있는 구조이다.

- keyExtractor는 키를 넣지 않으면 발생하는 오류를 방지하기 위해 원소마다,
키를 할당해준다.

- alwaysBouncerVertical은 스크롤을 잡았다 떼면, 약간의 튕김 효과를 줄 것인지를 체크한다.

 

 

 

 

 

Ripple 차등 적용

 

문제) 버튼 클릭 시 Ripple 속성 값이 안드로이드에서만 적용되고,
ios에는 적용 안됨

 

 

React Native 문서

 

 

 

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

  
  const styles= StyleSheet.create({
  
  pressedItem: {
    opacity: 0.5,
  },
  })

 

해결) ios에서는 style={ }  속성 값에 pressed라는 매개변수를 넣어서 눌림 작동이 되면
해당 style로 변경할 수 있게끔 하였다.

 

 

 

모달창

사용법)

<Modal visible={props.isVisible} animationType="slide"></Modal>

 

- Modal 태그 안에 다른 View 태그를 넣은 후 visible 상태에 따른 창 띄움 가능.

- animationType 으로 slide 효과나 다른 효과 기능.

 

 

 

코드

https://github.com/HojinLim/CourseTodo

 

 

 

 

참고

https://reactnative.dev/docs/