로딩 스피너

[Spinner.js]

 

[bucket.js]

[App.js]

render안의 내용이 로드가 되었을때만 나오고 아니면 스피너가 나오게한다.

import Spinner from "./Spinner";

render() {
    return (
      <div className="App">
        <Container>
            <Title>내 버킷리스트</Title>
        {!this.props.is_loaded? (<Spinner/>) :(
          <React.Fragment>
                <Progress/>
                <Line />
                {/* 컴포넌트를 넣어줍니다. */}
                {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
                {/* Route 쓰는 법 2가지를 모두 써봅시다! */}
                <Switch>
                  <Route
                    path="/"
                    exact
                    render={(props) => (
                    <BucketList 
                      bucket_list={this.props.bucket_list}
                      history={this.props.history}/>)}
                  />
                  <Route path="/detail/:index" component={Detail}/>
                  {/* <Route component={NotFound}/> */}
                  {/* 뒤로가기 기능까지 추가해보기 */}
                  <Route render={() => (<NotFound history = {this.props.history}/>)}/>
                </Switch>
              {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
              <Input>
                <input type="text" ref={this.text} />
                <button onClick={this.addBucketList}>추가하기</button>
              </Input>
              <button onClick={() =>{
                window.scrollTo({top:0, left:0, behavior: "smooth"});
              }}>위로가기</button>
          </React.Fragment>
        )}
       </Container>
      </div>
    );
  }
}