Filling. Adding Functions - Products List

maimade·2021년 9월 15일
0

2. WeCode. Team Project

목록 보기
3/3

practice 1

  • Pages
    • ProductList
      • Product
        • Product.js
      • ProductList
        • Productlist.js
    • 여기가 사람들이 보는 화면???
  • Main
  • index.js
  • Routes.js

practice 2

  • Monsters
    • Components
      • Card
        • Card.js
          | Step 4. 이미지 주소의 숫자 부분을 props로 내려받은 id로 대체
          <div className="card-container">
          <img src=이미지 주소 alt="" />
          <h2>Name</h2>
          <p>Email</p>
          </div>
      • CardList
        • CardList.js
          | Step 3. 넘겨 받은 배열을 기준으로 Array.map()함수를 활용해 <Card /> 컴포넌트를 리턴 (Card.js에 넘겨야 하는 props는 몬스터 객체의 id, name, email)
    • Monsters.js
      | Step 1. 데이터 로딩 w. conponentDidMount(), fetch(), setState() (setState는 state 객체 내에 monsters라는 key 값에 저장)
      | Step 2. API 호출 후 저장한 props를 활용해 배열을 자식 컴포넌트인 <CardList />에 전달
  • index.js
  • Routes.js
  1. componentDidMount() 메소드를 통해 라이프 사이클 이해
  2. fetch() 함수를 사용해 API 호출
  3. Array.map() 함수를 통해 component를 재활용
  4. props 를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터 전달

filling

  • src

    • Pages

      • Product

        • Product.js
          | Step 1. 데이터 로딩 w. conponentDidMount(), fetch(), setState() (setState는 state 객체 내에 products라는 key 값에 저장)
          | Step 2. API 호출 후 저장한 props를 활용해 배열을 자식 컴포넌트인 <ProductCardList />에 전달
        • ProductCard.js
          | Step 4. 이미지 주소의 숫자 부분을 props로 내려받은 id로 대체 (이건 BE API 생기면)
          <div className="card-container">
          <img src=이미지 주소 alt="" />
          <h2>Name</h2>
          <p>Email</p>
        • ProductCardList.js
          | Step 3. 넘겨 받은 배열을 기준으로 Array.map()함수를 활용해 <ProductCard /> 컴포넌트를 리턴 (ProductCard.js에 넘겨야 하는 props는 제품 객체의 product)
      • Survey

        • Survey.js
        • SurveyIntro.js
        • SSS.js
  • index.js

  • Routes.js

profile
느려도 할 거야.......

0개의 댓글