[React]컴포넌트 파일 생성하기

데이터 파일, 컴포넌트 생성 파일을 따로 생성해서 아~주 간단한 거 구현해보는 시간!!

 

컴포넌트 : 갯수가 많거나 변동이 잦은 데이터 조절을 위해서 ..쉽게말하면 축약어 설정해주기 정도로 이해하면 될지 않을까..

 

props: 부모에서 자식 컴포넌트 사이에 데이터 이동을 위한 것!! 형제요소끼리 안됨. 자식->부모 안됨.

무조건 부모-> 자식만 가능

 

먼저 소스코드부터 보시죠

//App.js

import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';
import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';
import data from './data.js';
import Shoes from './shoes';
import './App.css';



function App() {

  const [shoes, setShoes] = useState(data);

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Chanel</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#Clothes">Clothes</Nav.Link>
            <Nav.Link href="#pricing">Bags</Nav.Link>
            <Nav.Link href="#Shoes">Shoes</Nav.Link>
            <Nav.Link href="#Acc">Acc</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div className='main-bg'></div>
        {
          data.map((item, i) => {
            return(
                <div className='list' key={i}>
                      <Shoes
                        image={item.image}
                        title={item.title}
                        content={item.content}
                        price={item.price}
                      />
                </div>
                )
            })
          }
    </div>
  );

}

export default App;

//shoes.jsx
//components생성

import React from 'react';

export default function Shoes({title, content, price,image}){
    return(
        <div className='shoes-container'>
            <img src= {image} alt="상품이미지" />
            <div className='shoes-content'>
                <h2>{title}</h2>
                <h4>{content}</h4>
                <p>{price}</p>
            </div>
        </div>
    )
}

//data.js

const data = [
    {
        id : 0,
        title : "White and Black",
        content : "Born in France",
        price : 120000,
        image : "https://codingapple1.github.io/shop/shoes1.jpg"
    },

    {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000,
    image : "https://codingapple1.github.io/shop/shoes2.jpg"
    },

    {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000,
    image : "https://codingapple1.github.io/shop/shoes3.jpg"
    }
]

export default data;

---

//import 할 때!! 내가 만든 js파일이면 ./ 이렇게 쩜 슬래시로 시작하지만 설치한 라이브러리면 그런거 필요없다.

요렇게

---

비구조화할당으로 데이터 받아오기

props 예약어로 데이터 받아오기

현재는 데이터 양이 많지 않아서 그~다지 유용하지 않았지만

 

훗날에... 개발고수가 되어서 많은 데이터양을 처리할 때 유용할 컴포넌트...

 

1. 데이터들을 변수로 할당함

2. 컴포넌트 생성 (레이아웃 잡기)

3. data담긴 파일, jsx(컴포넌트생성)파일 모두 import!!

그리고 map함수로 데이터의 갯수만큼 데이터 생성 ( 이때 data에서 가져온 값들로 데이터바인딩을 해준다 ) 

 

 

잘 보이는군

 

https://hans-j.tistory.com/163

[React]Component 문법, 동적 UI, map 함수

 

 

 

이거보면 컴포넌트랑 props 개념 잡기 쉽다. 

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

---

도움 진짜 많이 된 유투브..감사합니다..감사합니다..

 

https://youtu.be/qN6Svts61qs

---

코딩애플 강좌를 듣고 작성하는 글입니다