useContext 강의에서 에러가 납니다

[김철연]

선생님처럼 App.js에 다른 컴포넌트를 작성하지 않고 따로 js파일을 만들어서 import해오는 식으로 작성한 생태입니다
import {useContext} from 'react' 도 다했고 강의 하시는대로 다 따라했는데도 Card.js (저는 Product.js)에서 
let 재고 = useContext(재고context)를 하면 Card.js (Product.js)에서 재고context is not defined라고 에러가 뜹니다

------------------------------------------Card.js (Product.js)---------------------------------------------

import React, { useContext } from 'react'
import { useHistory } from 'react-router-dom'

export default function Product({ product, index }) {
   let history = useHistory()
   let 재고 = useContext(재고context)

   return (
      <div className="col-md-4">
      <img
            src={https://codingapple1.github.io/shop/shoes${index + 1}.jpg}
            alt="shoe"
            style={{ width: '100%' }}
       />
         <h4>{product.title}</h4>
         <p>{product.content}</p>
         <p>{product.price}</p>
         {재고}
      </div>
   )
}

 

 

------------------------------------------App.js-----------------------------------------------------

import './App.css'
import { Navbar, Container, Nav, NavDropdown, Button } from 'react-bootstrap'
import React, { useState, useContext } from 'react'
import ShoeInfo from './data'
import Product from './Product'
import Order from './Order'
import axios from 'axios'

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

let 재고context = React.createContext()

function App() {
   const [shoeData, setShoeData] = useState(ShoeInfo)
   const [stockData, setStockData] = useState([10, 11, 12])

   return (
      <div className="App">
         {/* 설명.. MAIN PAGE */}
         <Navbar bg="light" expand="lg">
            <Container>
               <Navbar.Brand href="#home">슈마켓</Navbar.Brand>
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                  <Nav className="me-auto">
                     <Nav.Link as={Link} to="/">
                        홈
                     </Nav.Link>
                     <Nav.Link as={Link} to="/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>
          <Switch>
             <Route exact path="/">
                <div className="sale-info-page">
                   <h1>2022년 새해맞이 기념할인</h1>
                   <p>
                      2022년 임인년 새해맞이 인기상품 파격 할인! <br /> 작년까지 가장
                      많이 팔린 신발 3종을
                     <br /> 전 세계에서 가장 저렴하게 구매하세요!
                   </p>
                   <p>
                      <Button variant="primary">Learn more</Button>
                   </p>
                </div>
                <div className="container">
                   <재고context.Provider value={stockData}>
                      <div className="row">
                         {shoeData.map((product, index) => {
                            return <Product product={product} index={index} key={index} />
                            // <Product shoeData={shoeData[index]} key={index} />
                         })}
                      </div>
                   </재고context.Provider>
                   <button
                      className="btn btn-primary"
                      onClick={() => {
                      // 로딩중이라는 UI띄움
                      axios
                        .get('https://codingapple1.github.io/shop/data2.json')
                        .then((obj) => {
                        // 로딩중이라는 UI 없앰
                           const newShoes = obj.data
                           const newShoeData = [...shoeData]
                           newShoeData.push(...newShoes)
                           setShoeData(newShoeData)
                           //setShoeData([...shoeData, ...obj.data])
                        })
                        .catch(() => {
                           // 로딩중이라는 UI 없앰
                           console.log('실패')
                         })
                      }}>
                     더보기
                  </button>
               </div>
            </Route>

            {/* 설명.. DETAIL PAGE */}

            <Route path="/detail/:id">
               <Order
                  shoeData={shoeData}
                  stockData={stockData}
                  setStockData={setStockData}
                />
             </Route>
          </Switch>
       </div>
     )
}

export default App

 

[김철연]

강의 뒷부분을 듣고 해결했습니다!

[글쓴이]

글