로딩중입니다 UI 생성

[박누리]

import React, {useState} from 'react';
import { Navbar,Container,Nav,NavDropdown,Button } from 'react-bootstrap';
import './App.css';
import Data from './data.js';
import Detail from './Detail.js';
import axios from 'axios';

import { Link, Route, Switch } from 'react-router-dom';

function App() {

 let [shoes, shoes변경] = useState(Data);
 
 let [ loading, loading변경 ] = useState(false);

       
  return (
    <div className="App">
    <Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
        <Nav.Link as={Link} to="/"> Home  </Nav.Link>
        <Nav.Link  as={Link} to="/detail"> Detail </Nav.Link>
        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

<Route exact path="/">
 
  <div className="Jumbotron">
 <h1>Hello, world!</h1>
 <p>
   this sdkfjwkejfal
 </p>
 <p>
   <Button variant="primary">learn more</Button>
 </p>
  </div>

  <div className="container">
   

           

        <div className="row">
          {
            shoes.map((a,i)=>{
              return <Card shoes={shoes[i]} i={i}/>  //혹은 shoes={a} 라고 해도 됨.
            })
          }
        </div>
        <button className="btn btn-primary" onClick={()=>{
         
         
           loading변경(true)
           
            axios.get('https://codingapple1.github.io/shop/data2.json')
           
           
            .then((result)=>{
              loading변경(false)
              console.log(result.data)
              shoes변경( [...shoes, ...result.data] );
            })
           
            .catch(()=>{
              loading변경(false)
              consloe.log('실패')
            })

        }}>더보기</button>

           {
            loading === true
            ? <loading />
            : null
           }
 </div>
</Route>

<Route path="/detail/:id">
  <Detail shoes={shoes}/>
</Route>

    </div>
  );
}

function loading(){
  return (
    <div className="my-alert2">
                <p>로딩중입니다.</p>
            </div>
  )
}

function Card(props){
 return (
  <div className="col-md-4">
   
   <h4>{ props.shoes.title }</h4>
   <p>{ props.shoes.content } & { props.shoes.price } </p>
  </div>
 )

}

export default App;

 

 

이렇게 만들어 보았는데...

이게 맞는건지 잘 모르겠습니다 ㅠㅠ

검토 부탁드려도 될까요..?

[codingapple]

잘될거같은데요 get 요청 이상한데로 해봐서 테스트 해봅시다 

[박누리]

get 요청 주소를 변경하였고.. loading변경(false)를 true로변경하였는데... 로딩중입니다 텍스트가뜨지 않습니다 ㅠㅠ

 loading변경(true)자체가 뜨지 않는거같은데.. 뭐가 문제일까요...

[codingapple]

loading 컴포넌트 이름을 대문자로 바꿔봅시다

ajax 실패해도 loading(false)로 바꿔줘서 안보이는 걸 수도 있습니다  

[글쓴이]

글