리액트 네이티브 setstate 관련 질문입니다.

Question

리액트 네이티브 setstate 관련 질문입니다.

조회수 534회

react-native

1

싫어요

import React, {Component} from 'react'
import {View, Text} from 'react-native'
import axios from 'axios'

class RECORD extends Component{

    constructor(props){
        super(props)

        this.state={
                results:null
        }

        axios.get('http://beam1100.cafe24app.com/record')
        .then((res)=>{
            this.setState({results:res.data.results})   
        })


    }

    render(){
        console.log(this.state.)
        return(
            <View>
                <Text>테스트페이지입니다.</Text>
            </View>
        )
    }
}

export default RECORD

생성자매서드에서 DB에서 가져온 배열을 state에 담아서

랜더매서드에서 처리하고 싶습니다.

하지만

렌더함수에서 results를 출력해보면 null이 출력되고 잠시뒤에 값이 있는 배열이 출력됩니다.

어떻게 해야 동기적으로 한번에 출력할 수 있을까요?

조영민 95 points

2020-04-24 16:14:35에 작성됨

댓글 입력

score 0 · Accepted Answer

구글링하다가 찾았습니다.

리액트는 state가 변경될 때마다 매번 DOM을 re-rendering하는 것은 아니다. 퍼포먼스 효율성을 위해서 여러 차례 setState가 있을 경우 다른 state의 변경까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 DOM을 re-rendering한다. 따라서 setState의 기본적인 작동 방식은 Asynchronous(비동기적)이다.

handleClick = () => {
    this.setState({meaningOfLife: this.state.meaningOfLife + 1});
    console.log(this.state.meaningOfLife);
  }

예를 들어 handleClick이라는 메소드는 setState lifecycle 메소드를 이용해서 meaningOfLife라는 state의 값을 1씩 더하고 있다. 위 코드 실행 이후 바로 console.log를 해도 항상 DOM에 보여지는 것보다 한 박자씩 늦게 숫자가 기록된다. 왜냐하면 setState가 비동기적으로 실행되므로, console.log가 실행되는 시점은 아직 setState에 의해 state가 변경되기 전이기 때문이다. 특히 위 코드에서 주목할 점은, setState의 첫번째 인자가 meaningOfLife: this.state.meaningOfLife + 1인 점이다. 변경할 state의 값을 현재 this.state의 값을 기반으로 설정하였다...

출처:https://soldonii.tistory.com/112