'shoes' is not defined no-undef 오류가 뜹니다.

[김수현]

선생님~ 이런 에러가 뜨는데요. 익스포트, 임포트, shoes오타 등 찾아봤는데 그래도 안되네요...ㅜㅜ

ERROR in [eslint]
src\App.js
  Line 40:18:  'shoes' is not defined  no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error and 1 warning
<!--more-->

아래는 App.js 파일입니다.

import { useState } from 'react';
import { Button, Navbar, Container, Nav } from 'react-bootstrap';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import './App.css';
import data from './data.js';

function App() {

  let [shoes] = useState(data)
  console.log(shoes)
  return (
    <div className="App">
      <Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div className="main-bg"></div>
      <ResponsiveAutoExample />

    </div>
  );
}

function ResponsiveAutoExample() {
  return (
    <>
      <Container>
        <Row>
          <Col sm>
            {/* < img src={process.env.PUBLIC_URL + '/logo192.png'} />  */}
            < img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{shoes}</h4>
            <p>상품설명</p>

          </Col>
          <Col sm>
            < img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품설명</p>
          </Col>
          <Col sm>
            < img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품설명</p>
          </Col>
        </Row>
      </Container>
    </>
  );
}
export default App;

아래는 data.js 파일입니다.

let data = [
    {
        id: 0,
        title: "White and Black",
        content: "Born in France",
        price: 120000
    },

    {
        id: 1,
        title: "Red Knit",
        content: "Born in Seoul",
        price: 110000
    },

    {
        id: 2,
        title: "Grey Yordan",
        content: "Born in the States",
        price: 130000
    }
]

export default data;

화면  캡처입니다.

[김수현]

앗~ 해결했습니다. 컴포넌트를 따로 2개 만들었는데,  거기서  shoes 상품정보를 불러와서 안됐네요.
props.shoes로 한 번 더 불러와서 전달해주니까 해결되네요.
그런데 props를 한 번만 사용해서 1개의 컴포넌트로 합치는 게 나을지,
props를 2번 사용해서 2개의 컴포넌트로 하는 게 성능에 나을 지 궁금하네요.

[codingapple]

페이지나 재사용할 html 덩어리들을 컴포넌트로 만드는게 좋습니다

[글쓴이]

글