앱개발 3주차_04

[필수 기초 지식 응용] state를 이용한 카테고리 기능

카테고리 버튼을 눌렀을때 카테고리에 맞는 데이터만 그려지도록 만들어봅시다.

1. 카테고리 상태 생성하기

 // 기존 꿀팁을 저장하고 있을 상태
 // 전체보기를 눌렀을때 기존 꿀팁 리스트를 보여줘야 한다.
  const [state,setState] = useState([]) 
 // 카테고리에 따라 다른 꿀팁을 그때그때 저장관리할 상태
  const [cateState,setCateState] = useState([])
  //cateState: 상태변수, setCateState: 상태를 관리할 함수

<상태 생성 꿀Tip>

• 컴포넌트에 상태를 여러개 만들어도 됩니다.
• 관리할 상태이름과 함수는 자유자재로 정의할 수 있습니다.
• 초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있습니다.

2. useEffect함수 사용

  useEffect(()=>{
	   
    // 뒤의 1000 숫자는 1초를 뜻함
    // 1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        // 꿀팁 데이터로 모두 초기화 준비
        let tip = data.tip;
        setState(tip) // state변수에 data.tip 넣음
        setCateState(tip) // CateState 변수에 tip 데이터를 넘겨줌
        setReady(false) // 준비화면 false로 바꿔줌
    },1000)

3. category함수 만들기

- filter 함수 사용하기

• 반복문의 일종으로 map은 반복만 시킨다면 filter는 조건문을 통해서 데이터를 필터링 할 수 있습니다.
• return 뒤에 조건을 작성합니다.

const category = (cate) => { // cate는 파라미터
        if(cate == "전체보기"){
            //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
            setCateState(state)
        }else{ // 전체보기가 아니면!!
            setCateState(state.filter((d)=>{ 
                return d.category == cate
            }))
        }
    }

• state에는 꿀팁 전체가 들어가 있습니다.
• (d)는 state에 들어있는 tip 리스트 중 요소 하나하나를 의미합니다.
• 만약 result 안에 들어있는 의 category(cate)가 const category = (cate)의 cate와 같다면 그 요소만 빼서 리스트를 만드는 것입니다.
  아래 코드에서 category(cate)의 cate 안에는 전체보기가 들어가 있네요!

<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>

화면 그리는 코드 중 (cate) 참고하기

<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>

상태(데이터)가 달라지면 화면을 다시 그린다는 사실 중요!!