Context API

part3 context api 강의랑 똑같이 하니까 react app이 아무것도 안보이는데 왜이러는건가요..?

변경한건

let 재고context = React.createContext();

<재고context.Provider value={재고}>
      {/* 같은값을 공유할 html을 <범위>로 싸매기 */}
        <div className="row">
           {
             shoes.map((a, i)=>{
               return <Card shoes={shoes[i]} i={i} key={i} />

             })
           }
        </div>
        </재고context.Provider>

function Card(props){
  let 재고 = useContext(재고context);
  return (
    <div className="col-md-4">
     
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
      <Text></Text>
    </div>
  )
}

function Test(){
  let 재고 = useContext(재고context)
  // 3.useContext로 공유된 값사용하기
  return <p>{재고}</p>
}

이부분밖에 없는데

/*eslint-disable*/
/* eslint no-restricted-globals: ["off"] */
// 위에꺼 history 적용을 위해 씀
import React, {useContext, useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar,Container,Nav,NavDropdown,Jumbotron} from 'react-bootstrap';
import Data from './data.js';
import Detail from './Detail.js'
import {Link, Route, Switch } from 'react-router-dom';
import axios from 'axios';

let 재고context = React.createContext();
// 1.같은 변수값을 공유할 범위를 생성해주는 문법
function App() {

  let [shoes,shoes변경] = useState(Data)
  let [클릭횟수,클릭횟수변경] = useState(2)
  let [재고,재고변경] = useState([10,11,12])
  return (
    <div className="App">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"> <Link to="/">HOME</Link></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><Link to="/detail">Detail</Link></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"/></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
    </div>
    </nav>
   
   <Switch>
      <Route exact path="/">
      <div class="jumbotron background">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4"/>
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </div>
   
      <div className="container">
      <재고context.Provider value={재고}>
      {/* 같은값을 공유할 html을 <범위>로 싸매기 */}
        <div className="row">
           {
             shoes.map((a, i)=>{
               return <Card shoes={shoes[i]} i={i} key={i} />

             })
           }
        </div>
        </재고context.Provider>
        <button className='btn btn-primary' onClick={()=> {
          // 로딩중이라는 UI띄움
       
          axios.get("https://codingapple1.github.io/shop/data"+클릭횟수+".json")
          .then( (result)=> {
            클릭횟수변경(클릭횟수+1)
            // 로딩중이라는 UI안보이게 처리  
            shoes변경( [...shoes, ...result.data] )
            // 데이터가져와서 shoes라는 state에 추가
           })
          // 성공했을때
          .catch( ()=> {
            console.log('실패했어요')
          })
          // 실패했을때
        }}>더보기</button>
      </div>
      </Route>
     
     
      <Route path="/detail/:id">
        < Detail shoes={shoes} 재고={재고} 재고변경={재고변경}/>
      </Route>

      <Route path="/:id">
        {/* 아무주소 다 적어도 적용되는거 */}
      </Route>
      </Switch>  
      {/* switch:중복사용안되게해줌 */}
    </div>

   
  );
}

function Card(props){
  let 재고 = useContext(재고context);
  return (
    <div className="col-md-4">
     
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
      <Text></Text>
    </div>
  )
}

function Test(){
  let 재고 = useContext(재고context)
  // 3.useContext로 공유된 값사용하기
  return <p>{재고}</p>
}

export default App;