React-Native [6. State와 filter를 사용한 데이터 관리]

MainPage.js

.
.
.
  
const [state, setState] = useState([]);
const [cateState, setCateState] = useState([]);
const [ready, setReady] = useState(true);

useEffect(() => {
  setTimeout(() => {
    let tip = data.tip;		// data.json의 tip 키를 참조하여 tip으로 데이터 할당
    setState(tip);			// state에 tip(json에서 가져온 전체 데이터) 저장
    setCateState(tip);		// cateState에도 tip 저장 -> 데이터 변동이 있을 예정
    setReady(false);			// 데이터 할당할 시간을 벌어주는 역할. 사실 별로 좋은 방법은 아니다.
  }, 1000);
}, []);

const category = (cate) => {			// category 함수를 실행할때 가져온 값을 cate로 사용하겠다!
  if (cate == "전체") {					
    setCateState(state);				// "전체"일 경우 state 그대로 사용하겠다!
  } else {
    setCateState(
      state.filter((d) => {			// "전체"가 아닐 경우 filter 함수를 사용하여 데이터를 걸러내겠다!
        return d.category == cate;	// d(state 데이터 content)의 카테고리와 cate가 일치하면 생존!
      })
    );
  }
};
  
.
.
.
  
<TouchableOpacity
  style={styles.button01}
  onPress={() => {
    category("전체");		// 버튼을 클릭하면 category 함수에 "전체" 라는 값을 넣어 실행
  }}
  >
  <Text style={styles.buttonText}>전체</Text>
</TouchableOpacity>
<TouchableOpacity
  style={styles.button02}
  onPress={() => {
  category("생활");		// 버튼을 클릭하면 category 함수에 "생활" 라는 값을 넣어 실행
  }}
  >
  
  .
  .
  .
  
<View style={styles.cardContainer}>
  {cateState.map((content, i) => {		// 최종적으로 cateState를 map함수로 탐색하여 출력!
    return <Card content={content} key={i} />;
  })}
</View>