state를 이용해 로딩 상태 구현하기

우선 머릿속으로 생각한 것은

 

맨 처음 홈페이지를 접속했을 때

 

대충 "로딩중입니다..." 라는 메시지가 처음에 출력되고

 

약 3초 뒤에 내가 원하는 화면이 출력되는 웹을 만들고 싶었다.

 

---

 

그래서 대강 만들어 낸 전체 코드는 다음과 같다.

 

 

 

import React from 'react';
import iamready from './Iamready.gif'

class App extends React.Component{
  state = {
    Loading: true
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({Loading: false});
    }, 3000);
  }
  render() {
    return <div>{this.state.Loading ? "로딩중..." : <h1>"난 준비 됐다! 준비 됐어! 준비 됐다!"</h1>}
    <p>
      {this.state.Loading ? "" : <img src={iamready} width='200' height='150' alt="spongebob is fucking ready!" />}
    </p>
    </div>;
  }
}

export default App;

 

 

App.js에 다음과 같은 코드를 작성해 줬다.

 

---

 

대충 원리는 state를 활용해서 처음에 Loading이라는 변수에 true라는 값을 줬고, 삼항 연산자를 통해 처음엔 true값인 Loading은 "로딩중..."을 출력하고 3초가 지나면 "난 준비됐다!"라는 문자와 함께 우리의 친구 스폰지밥이 준비됐다고 외치는 모습을 담은 gif 파일을 함께 출력해 준다.

 

 

 

 

---

 

대강 실행 모습은 다음과 같다.

 

 

gif임 기다리면 변경사항 확인 할 수 있음

 

 

끝!