[React] React 기본 - state 예제

React의 가장 기본적인 문법과 예제로,
실무에서 직접적으로 적용할 수 있는 중요 개념이므로 반드시 익혀두자.

1-1. 기능구현

최초 rendering 시 Loading 글자를 띄우고, 이후 상태업데이트하여 ready 화면 띄우기

1-2. 사용기능

state / componentDidMount

componentDidMount method와 setState를 활용하여 상태관리한다.

setTimeout

지연처리를 하여 비동기처리를 구현한다.

비구조화(ES6)

비구조화를 통해 변수화한다.

삼항연산자

Loading 화면을 구현하기위해 삼항연산자를 사용한다.

1-3. 코드예제

import React from 'react'
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

  state = {
    isLoading : true 
  }

  componentDidMount(){
    setTimeout(()=>{
      this.setState({isLoading : false})
  },3000)
}

  render(){
  const {isLoading} = this.state
  return (
    <div>{isLoading ? "Loading" : "Ready"}</div>
  );
}
}

export default App;

2. 실무적용방안

• loading 화면과 loading 이후의 화면을 구현한다.
• loading 전/후는 setState나 setTimeout(지연을 통한 비동기처리)로 관리한다.
• Loading 이후 rendering 화면과 data를 fetch 하고 이를 화면으로 구현한다.
• 기본적으로 fetch할 data나 이후에 사용가능성이 높은 데이터는 state에 미리 선언해두는 것을 권장한다.