React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)

데이터 바인딩해서 컴포넌트로 뿌리기

조건

data.js로 분리되어있는 data를 바인딩해서 컴포넌트로 만들어 여러 상품을 한번에 뿌려야 한다.

---

풀이

function App() {
  let [shoes] = useState(data);
  
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#cart">Cart</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>

      <div className="main-bg" style={{backgroundImage : 'url('+ mainBg +')'}}></div>

      <div className="container">
        <div className="row">
          {
            shoes.map(function(a, i){
              return (
                <Product shoes={shoes} i={i}/>
              )
            })
          }
        </div>
      </div>
    </div>
  );
}
function Product(props){
  return (
    <div className="col-md-4">
      <img src={`${process.env.PUBLIC_URL}/shoes${props.i + 1}.jpg`} width="80%" />
      <h4>{props.shoes[props.i].title}</h4>
      <p>{props.shoes[props.i].price}</p>
    </div>
  )
}

---

알게 된 점

중괄호({}) 내에서 문자열에 변수를 포함시키려면 템플릿 리터럴(Template literal) 문법을 사용해야한다. 템플릿 리터럴은 백틱(``)으로 감싸며, 변수를 ${} 안에 넣어서 문자열과 결합할 수 있다.

<img src={`${process.env.PUBLIC_URL}/shoes${props.i + 1}.jpg`} width="80%" />

그래서 위쪽 inline style 속성도 아래처럼 두 가지로도 쓸 수 있다.

<div className="main-bg" style={{backgroundImage : 'url('+ mainBg +')'}}></div>
<div className="main-bg" style={{backgroundImage : `url(${mainBg})`}}></div>

---

출처 : 코딩애플 https://codingapple.com/