[react] state, componentDidMount

목표:

 

loading 텍스트가 3초 뒤에 we are ready 로 바뀌는 화면

 

 

리액트를 시작할 때 보이는 기본적인 코드 구조는 아래와 같다.

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render(){
    return <div>{isLoading ? "Loading..." : "we are ready"}</div>
  }
}

export default App;

 

리액트는 자바스크립트 기반의 모듈이기에 div 속 {  } 에 함수를 넣어줄 수 있다.

 

{ isLoading ? "Loading..." : "we are ready" }

isLoading 이 true 이면 Loading... 을 화면에 찍어주고,

false 라면 we are ready 찍어준다.

 

 

 

그런데 우리는 isLoading 함수의 값을 변화시켜야하기 때문에

state라는 상태값을 부여한다.

return <div>{this.state.isLoading ? "Loading..." : "we are ready"}</div>

// isLoading 을 변수에 담는 경우 코드가 더 간결
const {isLoading} = this.state;
return <div>{isLoading ? "Loading..." : "we are ready"}</div>

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    isLoading : true,
  };
  render(){
    const {isLoading} = this.state;
    return <div>{isLoading ? "Loading..." : "we are ready"}</div>
  }
}

export default App;

 

 

componentDidMount는 render 함수 이후에 호출되는 리액트 life cycle method 이다.

(* 리액트 life cycle method 여러가지가 있는데 나중에 내용 추가하기)

 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    isLoading : true,
  };
  componentDidMount(){
    setTimeout(()=>{
      this.setState({ isLoading : false });
    },3000)
  }
  render(){
    const {isLoading} = this.state;
    return <div>{isLoading ? "Loading..." : "we are ready"}</div>
  }
}

export default App;

 

componentDidMount 함수 안에서 data 값, 즉 여기서는 isLoading 값을 fetch 한다고 표현한다.

componentDidMount 함수 안에 딜레이 함수인 setTimeout 을 넣어 setState 로 

isLoading 값을 바꾸자.

 

그리고 

isLoading 의 false 값은 "we are ready" 이다

 

 

결과 :

화면에 Loading... 이라는 텍스트가 3초 뒤 we are ready 라는 텍스트로 변한다