[React] (4) 데이터 가져오기

1. 데이터 가져오기

- data.js

let data = [
    {
      id : 0,
      title : "나이키",
      content : "우먼스 나이키 인터랙트 런",
      img : "./img/shoes1.png",
      price : 99000
    },
  
    {
      id : 1,
      title : "아디다스",
      content : "그라다스",
      img : "./img/shoes2.png",
      price : 79000
    },
  
    {
      id : 2,
      title : "반스",
      content : "올드 스쿨 - 블랙/블랙 (CANVAS)",
      img : "./img/shoes3.png",
      price : 85000
    }
  ] 

  export default data;

 

[ ] : array

{ } : object

 

export default 변수명 : 원하는 변수를 밖으로 내보낼 수 있음.

 

** array vs object

  - array : 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 index라고 한다.

  - object : 이름과 값으로 구성된 property의 정렬되지 않은 집합이다. ( key : value )

  => 차이점 : 순서 (array는 자료간 순서가 존재하지만, object는 순서 개념이 없다.)

 

- App.js

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

function App() {
  console.log(data);
  return (
    <div className="App">
    </div>
  );
}

export default App;

 

data.js를 import한 후 data값에 대한 log를 찍어본다.

log 찍어보면 위 이미지와 같이 data가 출력되는 것을 확인할 수 있다.

 

 

2. 데이터 활용하기

가져온 데이터를 활용하여 화면에 뿌려보겠다.

 

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

function App() {
  let [shoes, setShoes] = useState(data);
  return (
    <div className="App">      
      <div className="container">
        <div className="row">
          {
            shoes.map((a,i)=>{
              return (
                <Card i={i} shoes={shoes[i]} />
              )
            })
          }
        </div>
      </div>
      
    </div>
  );
}

function Card(props) {
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) + '.jpg'} width="80%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.price }</p>
    </div>
  )
}

export default App;

 

(1) useState

  - 일반 변수는 갑자기 변경되면 html에 자동으로 반영 안됨

  - state는 갑자기 변경되면 state쓰던 html은 자동 재렌더링됨

  → 변동 시 자동으로 html에 반영도게 만들고 싶으면 state 사용하면됨

  → 자주 변경될 것 같은 html 부분은 state로 만들어놓기

      ( state를 데이터바인딩하는 형식으로 사용 )

 

(2) map

  - array 자료 갯수만큼 함수안의 코드 실행해줌

  - 함수의 파라미터는 array 안에 있던 자료임

  - return에 뭐 적으면 array로 담아줌

 

(3) 컴포넌트

  - function 만들기 (영어대문자가 규칙)

  - 어떤걸 컴포넌트로 만들면 좋은가?

     → 반복적인 html 축약할때

     → 큰 페이지들

     → 자주 변경되는 것들

  - 단점

     →  state 사용에 문제생김

          (A함수에 있던 변수는 B함수에서 마음대로 가져다 쓸 수 없음)

  - 부모(App) -> 자식(Card) state 전송하는 방법 : props

     →   props 전송은 부모 -> 자식 만 가능

     →   state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트

 

 

## 코딩애플 React part2 강의 내용 ##

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌