Filling. Adding Functions - Products List

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