앱개발 강의 3주차 Note - (2) 앱 상세화면 만들기 - useState, useEffect

앱개발 3주차 [앱 필수 기초지식03] 상태(useState)와 useEffect

 

리액트는 상태가 바뀌어야 화면이 바뀐다.

상태란, 컴포넌트에서 보유/관리되는 데이터.

state는 useState로 생성하고, setState함수로 변경 가능.

 

useEffect

사용방법은 정해져있다. 화면이 그려진 후에 가장 먼저 실행되는 함수.

데이터를 준비할 때 사용하는데,

데이터를 서버나 어디선가부터 받아서 상태에 반영하게된다.

화면이 그려지고 -> 서버에 데이터를 요청하여 받고 -> 상태 데이터가 update되어 화면이 다시 그려진다

 

//useState 사용법

  //[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수

  //setState는 state를 변경시킬때 사용해야하는 함수

 

  //모두 다 useState가 선물해줌

  //useState()안에 전달되는 값은 state 초기값

  const [state,setState] = useState([])

  

 

  //하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수

  //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음

  useEffect(()=>{

    setState(data)

  },[])

 

메인페이지가 화면에 그려졌다.

return 내용.

그 다음에, useEffect가 useState를 통해 상태를 관리한다.

근데 화면을 그리려고 했는데 오류가 나온다.

 

state는 리스트인데, 그 안에 아무것도 없다.

아무것도 없는 변수에서 아래 tip 이라는 값을 꺼내려고 한다. 그래서 오류다.

 

[기초지식 응용] 컴포넌트와 상태를 이용한 로딩화면 만들기

 

상태관리하기 전에는 데이터가 없다, 그래서 오류가 나는건 빈번하다.

 

그래서 로딩화면을 가운데 둔다.

const [state,setState] = useState([])

상태를 변경시킬 수 있는 함수하나와 변수하나를 가진다. 상태(데이터)관리를 하는 것.

 

로딩화면 만들기.

 

Loading.js 만들기 (Components 폴더 안에)

 

 

import React from 'react';

import {View,Text,StyleSheet} from 'react-native';

 

export default function Loading(){

    return(<View style={styles.container}><Text style={styles.title}>준비중입니다...</Text></View>)

}

 

 

const styles = StyleSheet.create({

    container: {

        //앱의 배경 색

        flex:1,

        justifyContent:'center',

        alignItems:'center',

        backgroundColor: '#fdc453',

    },

    title: {

        fontSize:20,

        fontWeight:'700'

    }

 

})

 

Main.js에서 바뀌는 부분

 

  const [ready,setReady] = useState(true)

 

  useEffect(()=>{

     

    //뒤의 1000 숫자는 1초를 뜻함

    //1초 뒤에 실행되는 코드들이 담겨 있는 함수

    setTimeout(()=>{

        setState(data)

        setReady(false)

    },1000)

 

    

  },[])

 

 

ready와 setReady로 상태관리에 대한 또다른 변수와 함수가 된다.

지연 함수를 넣었다.

 

ready ? <Loading/> : ( ~

삼항 연산자다. ready가 true면 ?, false면 : 뒤에를 실행한다.

 

화면이 그려지고 useEffect가 실행되는데

2초있다가 setState(data), setReady로 false가 됨 -> 뒤에가 실행됨

 

상태값이 변경되면 화면이 변경된다.

 

 

3주차 - 앱 필수 기초지식 응용 state를 이용한 카테고리 기능 넣기

 

cateState 라는 변수를 따로 두었다.

 

category 함수 부분

전체보기를 누르면, 전체 꿀팁이 setCateState에 들어간다.

다른걸 누르면 cate 변수에 담긴 내용을 setCateState에 넣는다.

 

filter 함수. 반복문(map)과 비슷하다.

근데 여기 조건문이 함께 들어간다.

return 뒤에 있는 조건이 true인 애들을 리스트로 만들고,

setCateState에 넘겨준다. (상태변경이 이루어짐)

 

상태값이 변경되면 그 변경된 상태값으로 화면을 그려준다.

이게 제일 중요 포인트.