상태(useState)
--> 리액트 네이티브에서는 화면에 나타날 일반 데이터의 변화가 화면의 변경을 의미하지 않음
--> 상태(useState) 에 의해 관리되는 데이터의 변화가 있어야만 화면이 변경됨
--> 즉 상태가 화면의 재출력을 맡는 것
상태(useState)가 바뀌면 화면이 바뀐다.
상태(useState)에 의해 관리되면 데이터에 변화가 생기면 상태(useState)가 자동으로 화면을 다시 그려준다.
UI = component(state)
컴포넌트의 상태가 변화할 때마다 UI(UserInterface == 화면)이 변화한다는 것을 의미하는 수식
위와 같은 형태로 화면을 재출력 하기 때문에
=====> 리액트 네이티브는 데이터의 변화에 따라 화면을 다시 그리는 것에 최적화 되어있는 기술
(그래서 주식그래프 같은 곳에 많이 쓰임)
[상태의 특징]
1) 컴포넌트에 상태를 여러개 만들어도 됨 2) 관리할 상태이름과 함수는 자유자재로 정의할 수 있음 3) 초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있음.
useEffect
useEffect --> 화면이 그려진 다음 가장 먼저 실행되는 함수
--> 리액트 기본 제공 함수
[사용법]
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])
일반적인 사용처 --> 화면이 그려지고 가장 먼저 실행되는 함수라는 의의
--> 값을 한번 찍어보거나(console.log)
--> 외부에서 값을 가져와서 준비해놓거나 등등
예를 들어, 앱을 켰을 때 로그인 여부에 따라 보여줄 화면이 다를 경우
useEffect에서 로그인 여부를 확인
useState와 useEffect를 사용한 데이터 전처리 예시
import React,{useState,useEffect} from 'react';
import main from '../assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
import Card from '../components/Card';
export default function MainPage() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
//useState 사용법
//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수//setState는 state를 변경시킬때 사용해야하는 함수
//모두 다 useState가 선물해줌
//useState()안에 전달되는 값은 state 초기값
const [state,setState] = useState([])
//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수 //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음
useEffect(()=>{
setState(data)
},[])
// let tip = data.tip;
//data.json 데이터는 state에 담기므로 상태에서 꺼내옴
let tip = state.tip;
let todayWeather = 10 + 17;
let todayCondition = "흐림"
return (
0) 사용할 데이터를 불러옴 + useState와 useEffect를 리액트에서 가져옴
import data from '../data.json';
import React,{useState,useEffect} from 'react';
1) useState 초기화
const [state,setState] = useState([])
[state,setState] 에서
--> state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
--> setState는 state를 변경시킬때 사용해야하는 함수
모두 다 useState가 선물해줌
--> useState()안에 전달되는 값은 state 초기값2) useEffect를 사용하여 useState에 준비한 데이터 넣기
useEffect(()=>{
setState(data)
},[])
하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음
3) state에 담긴 데이터(상태에 담긴 상태가 관리하는 데이터)를 꺼내옴
[기존의 데이터를 직접 불러오는 방식]
let tip = data.tip;
[state에 담긴 (상태가 관리하는) 데이터를 불러오는 방식]
let tip = state.tip;
//data.json 데이터는 state에 담기므로 상태에서 꺼내옴중요) 위의 코드대로 하면 오류가 발생한다.
--> 위의 코드대로 실행을 시키면 앱은 tip이 초기화가 안되어 있다고 오류메세지를 띄우게 된다.
그 이유는 tip이 data(Json파일)안에 들어있으며 data(Json파일)는 state(useState로 만든 상태 데이터를 담고 있는 변수)안에 넣어서 사용했는데,
그 state의 data 할당을 useEffect함수 안에서 했기 때문이다.
--> 즉, useEffect는 return이 실행된 이후(화면이 그려진 이후) 실행되기 때문에 처음 실행 당시에 화면이 그려질 때는 state에 data가 할당되어있지 않고 따라서 state.tip을 하더라도 아무것도 없는 것이다.
==> 이를 해결하기 위해서 로딩 화면을 구현하여 화면이 메인화면이 그려지기 전에 state에 data를 할당하는 과정이 필요해진다.
로딩화면으로 해결
data.Json은 이런 형태
{
"tip":[
{
"idx":0,
"category":"생활",
"title":"먹다 남은 피자를 촉촉하게!",
"image":"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3",
"desc":"먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.",
"date":"2020.09.09"
},
{
"idx":1,
"category":"생활",
......