[React Native] 메모 상태 수정, 필터 기능 구현하기

1. 테스트 데이터 준비하기

재실행 할 때 마다 데이터가 초기화 되어 매번 입력하고 확인하는 것을 방지하기 위해 초기에는 몇 개의  데이터를 세팅한다.

export default function App() {
	const [memos, setMemos] = useState([{"id": 1, "date": "2024-11-13", "memo": "앱 만들기", "status": false}, 
                                      {"id": 2, "date": "2024-11-13", "memo": "더 많은 앱 만들기", "status": false},
                                      {"id": 3, "date": "2024-11-12", "memo": "게임 하기", "status": false}]);
                                      
	// 캘린더 코드 생략
    
}

 

2. 메모 데이터 필터 

목표로 하는 구현은, 캘린더에 특정 날짜를 누르면, 그 날짜에 해당하는 메모만 보여주는 것이다.

이를 위해서는 메모 데이터를 순회하며, 선택한 날짜와 일치하는 경우에만 View에 랜더링 하도록 해야 한다.

export default function App() {
	const [memos, setMemos] = useState([{"id": 1, "date": "2024-11-13", "memo": "앱 만들기", "status": false}, 
                                      {"id": 2, "date": "2024-11-13", "memo": "더 많은 앱 만들기", "status": false},
                                      {"id": 3, "date": "2024-11-12", "memo": "게임 하기", "status": false}]);
                                      
	// 캘린더 코드 생략
    
    
    <View style={styles.memosArea}>
        <ScrollView >
          {memos.map((item, index) => (
            item.date === selectedDay ? 
            <TouchableOpacity key={item.id} style={styles.memoBox}>
              <Text key={item.id}>
                {`${item.memo}`}
              </Text>
            </TouchableOpacity> : null
          ))}
        </ScrollView>
   </View>
}

위와 같이 작성하면, date에 해당하지 않는 데이터는 걸러지고

해당하는 데이터만 남아서 볼 수 있게 된다

선택한 날짜에 해당하는 메모만 랜더링

 

3. 상태 변경 로직 구현

메모를 완료하는 것을 메모를 터치하는 것으로 표현한다고 하면

해당 메모는 터치되었을 때, 상태가 완료되었다는 변경 로직이 필요하다.

이를 위해서 초기 테스트 데이터 세팅 때 status 키를 만들었고, 이를 메모 완료 유무의 지표로 확인 할 예정이다.

먼저, 메모 완료를 위한 로직을 만들어 보자

export default function App() {
	const [memos, setMemos] = useState([{"id": 1, "date": "2024-11-13", "memo": "앱 만들기", "status": false}, 
                                      {"id": 2, "date": "2024-11-13", "memo": "더 많은 앱 만들기", "status": false},
                                      {"id": 3, "date": "2024-11-12", "memo": "게임 하기", "status": false}]);
	
    // 상태 완료 로직
    const ToggleMemo = (id) => {
        setMemos(prevMemos => 
          prevMemos.map(memo => 
            memo.id === id ? { ...memo, status: !memo.status } : memo
          )
        );
      };
    //
    
    
	// 캘린더 코드 생략
    
    
    <View style={styles.memosArea}>
        <ScrollView >
          {memos.map((item, index) => (
            item.date === selectedDay ? 
            	
                // 탭 시 완료 표기, 다시 탭 시 완료 취소
            <TouchableOpacity key={item.id} style={styles.memoBox} onPress={() => ToggleMemo(item.id)}>
       			
                //완료 상태에 따라 다른 style 적용
              <Text style={item.status ? styles.eachMemoTrue : styles.eachMemoFalse} key={item.id}>
                {`${item.memo}`}
              </Text>
            </TouchableOpacity> : null
          ))}
        </ScrollView>
   </View>
}

ToggleMemo 함수는 id 를 받아, memos 변수 내에서 해당 id를 검색한다.

그 후 id 의 status 값을 현재와 다른 값으로 바꿔준다 ( true <-> false) 

이런 방식으로 메모 탭 시 완료 표기, 다시 탭 시 완료 표기가 취소된다.

탭 시 완료 처리가 된 메모 예시

 

React 경험이 있다면 React Native 를 익히는게 비교적 쉽다고 들었었는데

화면 구현 단계에서는 생각보다 더 크게 와닿을 정도로 React 와 유사한 점이 너무 많다.

구성 요소 이름만 다른 React 라고 느껴질 정도