20210615 React14 : JS Array Cheat sheet, 쇼핑몰 프로젝트(ContextAPI, Hooks중심 : Providers, Contexts, Hooks)

7 분 소요

React 14

JS Array Cheat Sheet

by TomekSulkowsi

React Project : 쇼핑몰

프로젝트 개요

Context API로 상품 리스트와 상품주문의 상태를 공유하고 이를 Hooks를 이용해서 변경하고 사용하는 개발 형태
장바구니에 담기 기능이 있는 쇼핑몰 만들기
기본적인 디자인을 보는 것이 아닌 기능과, 코드 관리에 중점을 둠

기본 컴포넌트 구성

Header : 쇼핑몰 안내 관련 기본적인 Header 형태
Prototypes : 상품이 진열 되는 곳
- 개별 상품 : video, title, price, description, addButton
Order : 장바구니 역할
- Prototypes 컴포넌트에서 addButton 클릭시 장바구니로 1개의 수량 씩 추가됨
- 같은 품목을 중복해서 누르는 경우 장바구니에 들어있는 품목의 수량만 늘어남
- 다른 품목을 누르는 경우 장바구니에 새로운 품목이 추가됨 (품목 기준의 장바구니 임)
Footer : 기본적인 footer

ContextAPI를 통한 제품 정보 및 사용 함수 관리

컴포넌트 끼리 States, Props를 통해서 정보를 전달하고 활용하게 되면 점점 State, Props의 연결이 복잡하게 됨으로써 관리가 까다로워 지고 서로 영향을 주게 됨
ContextAPI를 통해서 전달하는 정보, 함수(Actions)를 관리하게 되면, 독립적으로 사용되어 깔끔하게 사용 할 수 있음

context 만들기

기본적으로 Context Provider를 만들어 정보를 나누기전에 Context 객체가 필요함

// AppStateContext.js
import React from "react";

// context 객체 생성, defaultValue 설정
const AppStateContext = React.createContext();

export default AppStateContext;

Custom Context.Provider Component (with Children)

사실은 context를 만들면 context.provider에 바로 접근하여 데이터를 공유할 컴포넌트를 묶어주면 사용준비가 끝난 상태이다.
하지만, 위처럼 App.js에서 바로 context.provider로 묶고 App.js에서 공유할 정보를 작성하면 App.js가 복잡하게 느껴짐
그래서, 따로 Custom context.provider이 Children을 받아들이도록 만들어서 provider를 깔끔하게 App.js에서 사용할 수 있고 공유할 정보를 독립적으로 관리할 수 있다.
모든 state, method들은 이곳에서 만들어 지기 때문에 어떤 컴포넌트에서 setState를 사용하는 경우 setState를 전달할 필요도 없이 그냥 이곳에서 setState를 활용하는 해당 method를 넣어 구현하고 method를 전달하면 됨

// AppStateProvider.jsx
import { useCallback, useState } from "react";

// Context 가져오기
import AppStateContext from "../contexts/AppStateContext";

const AppStateProvider = ({ children }) => {
  // Datas : useState
  const [orders, setOrders] = useState([]);
  const [prototypes] = useState([
    {
      id: "pp-01",
      title: "Kids-story",
      artist: "Thomas Buisson",
      desc: "This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.",
      thumbnail:
        "https://prototype-shop.s3.ap-northeast-2.amazonaws.com/thumbnails/Kids-story_1.mp4",
      price: 10,
      pieUrl: "https://cloud.protopie.io/p/8a6461ad85",
    },
    {
      id: "pp-02",
      title: "mockyapp",
      artist: "Ahmed Amr",
      desc: "This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.",
      thumbnail:
        "https://prototype-shop.s3.ap-northeast-2.amazonaws.com/thumbnails/mockyapp.mp4",
      price: 20,
      pieUrl: "https://cloud.protopie.io/p/27631ac9d5",
    },
    {
      id: "pp-03",
      title: "macOS Folder Concept",
      artist: "Dominik Kandravý",
      desc: "Folder concept prototype by Dominik Kandravý.",
      thumbnail:
        "https://prototype-shop.s3.ap-northeast-2.amazonaws.com/thumbnails/macOS_Folder_Concept_-_Folder_concept.mp4",
      price: 30,
      pieUrl: "https://cloud.protopie.io/p/acde5ccdf9",
    },
    {
      id: "pp-04",
      title: "Translator",
      artist: "Tony Kim",
      desc: "This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.",
      thumbnail:
        "https://prototype-shop.s3.ap-northeast-2.amazonaws.com/thumbnails/Translator.mp4",
      price: 40,
      pieUrl: "https://cloud.protopie.io/p/b91edba11d",
    },
    {
      id: "pp-05",
      title: "In-car voice control",
      artist: "Tony Kim",
      desc: "This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.",
      thumbnail:
        "https://prototype-shop.s3.ap-northeast-2.amazonaws.com/thumbnails/In-car_voice_control.mp4",
      price: 50,
      pieUrl: "https://cloud.protopie.io/p/6ec7e70d1a",
    },
  ]);

  // Actions : useCallback
  const addToOrder = useCallback(() => {});
  const remove = useCallback(() => {});
  const removeAll = useCallback(() => {});

  // Children에 context로 전달하는 값 연결
  return (
    <AppStateContext.Provider
      value=
    >
      {children}
    </AppStateContext.Provider>
  );
};

export default AppStateProvider;

최종적으로 AppStateProvider 컴포넌트 자체에는 어떤 값을 줄지는 모두 설정 되어 있고, 어느 컴포넌트에 값을 공유 해줄 것인지 정하여 children으로 들어가게 해주면 됨
즉, 컴포넌트 표현 형태로 공유해주고 싶은 컴포넌트들을 묶어 주어 사용하면 됨

// App.js
import Header from "./components/Header";
import Prototypes from "./components/Prototypes";
import Orders from "./components/Orders";
import Footer from "./components/Footer";
import AppStateProvider from "./providers/AppStateProvider";

function App() {
  return (
    <AppStateProvider>
      <Header />
      <div className="container">
        <Prototypes />
        <Orders />
        <Footer />
      </div>
    </AppStateProvider>
  );
}

export default App;

Context CustomHooks로 관리하기 (Hooks 폴더)

context에서 제공하고 있는 state 인, Prototypes, Orders를 좀더 가독성 좋게 사용하고 정리하기 위해 Hooks로 만들어 관리
- useActions.js -> addToOrder, remove, removeAll
- useOrders.js -> orders
- usePrototypes.js -> Prototypes
useContext() 함수를 활용하여 해당 Context를 인자로 넣으면 value 형태로 값을 모두 가져올 수 있는데, 구조 분해 할당을 활용하여 사용할 값만 가져와 사용 할 수 있음

import { useContext } from "react";
import AppStateContext from "../contexts/AppStateContext";

export default function usePrototypes() {
  // useContext를 통해서 AppstateContext에서 제공하고 있는 정보 중에서 prototypes를 받음
  const { prototypes } = useContext(AppStateContext);

  return prototypes;
}
// 사용하고 싶은 곳에서 usePrototypes() 만 사용하면 쉽게 값을 가져올 수 있음

import { useContext } from "react";
import AppStateContext from "../contexts/AppStateContext";

export default function useOrders() {
  const { orders } = useContext(AppStateContext);

  return orders;
}

import { useContext } from "react";
import AppStateContext from "../contexts/AppStateContext";

export default function useActions() {
  const { addToOrder, remove, removeAll } = useContext(AppStateContext);

  return { addToOrder, remove, removeAll };
}

상품 목록 만들기 (Prototypes Component)

usePrototypes를 사용해서, 상품 목록 정보 가져오기 (prototypes)
useActions를 사용해서, 상품 추가 mothod 가져오기 (addToOrder)

상품목록에서 상품을 꺼내서 각 상품별 정보 담아 오기
- prototypes.map() -> 각 상품 prototype 구조 분해 할당으로 정보 담아옴 -> 각 상품 별 JSX 반복
- button에 달려있는 Click 함수 정의 -> addToOrder() 에 해당 상품 id 넣어 추가

import useActions from "../hooks/useActions";
import usePrototypes from "../hooks/usePrototypes";

export default function Prototypes() {
  // 사용할 값, method 가져오기
  const prototypes = usePrototypes();
  const { addToOrder } = useActions();

  return (
    <main>
      <div className="prototypes">
        {
          // 상품 리스트에서 상품 가져와 각 상품에 대한 JSX 반복
          prototypes.map((prototype) => {
            const { id, thumbnail, title, price, desc, pieUrl } = prototype;
            const click = () => {
              addToOrder(id);
            };
            // 상품 1개에 대한 출력 모양
            return (
              <div className="prototype" key={id} /*id 추가 주의*/>
                {/*Thumnail 표현 부분*/}
                <a href={pieUrl} target="_BLANK" rel="noreferrer">
                  <div
                    style=
                  >
                    <video
                      autoPlay
                      loop
                      playsInline
                      className="prototype__artwork prototype__edit"
                      src={thumbnail}
                      style=
                    ></video>
                  </div>
                </a>
                <div className="prototype__body">
                  {/* title, button 표현 부분*/}
                  <div className="prototype__title">
                    <div
                      className="btn btn--primary float--right"
                      onClick={click}
                    >
                      <i className="icon icon--plus" />
                    </div>
                    {title}
                  </div>
                  {/* Price, Desc 표현 부분*/}
                  <p className="prototype__price">$ {price}</p>
                  <p className="prototype__desc">{desc}</p>
                </div>
              </div>
            );
          })
        }
      </div>
    </main>
  );
}

주문 목록 만들기 (Orders Component)

import { useMemo } from "react";
import useActions from "../hooks/useActions";
import useOrders from "../hooks/useOrders";
import usePrototypes from "../hooks/usePrototypes";

export default function Orders() {
  // 사용할 값, method 가져오기
  const orders = useOrders();
  const prototypes = usePrototypes();
  const { remove, removeAll } = useActions();

  // 주문 총합계 금액 계산
  const totalPrice = useMemo(() => {
    return orders
      .map((order) => {
        const { id, quantity } = order;
        const prototype = prototypes.find((p) => p.id === id);
        return prototype.price * quantity;
      })
      .reduce((l, r) => l + r, 0);
  }, [orders, prototypes]);

  // 주문 목록에 주문이 없는 경우 JSX
  if (orders.length === 0) {
    return (
      <aside>
        <div className="empty">
          <div className="title">You don't have any orders</div>
          <div className="subtitle">Click on a + to add an order</div>
        </div>
      </aside>
    );
  }

  // 주문 목록에 주문이 있는 경우 JSX
  return (
    <aside>
      <div className="order">
        <div className="body">
          {
            // 주문 리스트(orders)에서 주문(order) 가져와 각 주문에 대한 JSX 반복
            orders.map((order) => {
              const { id } = order;

              // 주문 id와 상품 목록에 있는 상품 id가 일치하는 경우, 해당 상품 정보 가져오기
              const prototype = prototypes.find((p) => p.id === id);

              // 해당 주문 제거하는 method
              const click = () => {
                remove(id);
              };

              // 주문 품목 1개에 대한 출력 모양
              return (
                <div className="item" key={id} /*id 추가 주의*/>
                  {/*주문 상품 Thumnail*/}
                  <div className="img">
                    <video src={prototype.thumbnail}></video>
                  </div>
                  {/*주문 상품 Title*/}
                  <div className="content">
                    <p className="title">
                      {prototype.title} X {order.quantity}
                    </p>
                  </div>
                  {/*주문 품목 수량 Total Price & 품목 제거 버튼 */}
                  <div className="action">
                    <p className="price">
                      $ {prototype.price * order.quantity}
                    </p>
                    <button className="btn btn--link">
                      <i className="icon icon--cross" onClick={click}></i>
                    </button>
                  </div>
                </div>
              );
            })
          }
        </div>
        {/* 주문 목록 Total Price 창 */}
        <div className="total">
          <hr />
          <div className="item">
            <div className="content">Total</div>
            {/* Total Price 표시 */}
            <div className="action">
              <div className="price">$ {totalPrice} </div>
            </div>
            {/* 주문 목록 전체 제거 버튼*/}
            <button className="btn btn--link" onClick={removeAll}>
              <i className="icon icon--delete" />
            </button>
          </div>
          {/* 주문 하기 버튼*/}
          <button
            className="btn btn--secondary"
            style=
          >
            CheckOut
          </button>
        </div>
      </div>
    </aside>
  );
}

Provider Methods 로직 작성하기

setState에서 callback을 넣으면 해당 callback의 첫번째 매개변수는 state임
useCallback, useMemo를 사용하는 이유가 state, props의 변경으로 인해서 컴포넌트 자체가 rerender시 재선언 되는 현상을 제어를 위함임
이화랑 블로그 : useMemo&useCallback

import { useCallback, useState } from 'react';
import AppStateContext from '../contexts/AppStateContext';

const AppStateProvider = ({ children }) => {
	const [prototypes] = useState([...]]);
	const [orders, setOrders] = useState([]);

// Methods

  const addToOrder = useCallback((id) => {
		// 버튼클릭으로 주문요청 id를 받아 orders에 해당 id와 수량 정보가 들어오게 함 ([{id, quantity: 1}] 형태)
    // useCallback으로 로직이 재선언 되는 것을 막음 (최초에 선언 되면 그 로직을 계속 활용하도록 함)
		setOrders((orders) => {
      // 주문 목록(orders)에서 주문요청 id와 주문 목록(orders)의 상품 id와 같은 상품의 정보(finded)를 가져옴
			const finded = orders.find((order) => order.id === id);

      // 주문 목록과 주문요청이 같은 것이 없는 경우
			if (finded === undefined) {
        // 원래 주문 목록에 주문요청 id 항목의 수량 1을 추가
				return [...orders, { id, quantity: 1 }];

      // 주문 목록과 주문요청이 같은 것이 있는 경우
			} else {
        // 주문 목록(orders)을 돌면서,
				return orders.map((order) => {

          // 주문목록의 상품(order)과 주문요청 상품(id)과 같으면,
					if (order.id === id) {
            // 해당 주문목록의 상품의 경우 주문요청 상품 id에 quantity를 기존 order의 quantity에 1추가
						return {
							id,
							quantity: order.quantity + 1,
						};

          // 주문목록의 상품과 주문요청 상품이 같지 않으면,
					} else {
            // 해당 주문목록의 상품은 그대로 둔다.
						return order;
					}
				});
			}
		});
	}, []);

	const remove = useCallback((id) => {
    // 주문 목록을 돌면서, 제거하는 품목의 아이디가 아닌 주문 상품만 주문목록에 설정함
		setOrders((orders) => {
			return orders.filter((order) => order.id !== id);
		});
	}, []);

	const removeAll = useCallback(() => {
    // 주문목록을 빈 배열로 설정함
		setOrders([]);
	}, []);

	return (
		<AppStateContext.Provider
			value=
		>
			{children}
		</AppStateContext.Provider>
	);
};

export default AppStateProvider;

Twitter Facebook LinkedIn

Taeyoung Kim(RaccoonCode96)

20210615 React14 : JS Array Cheat sheet, 쇼핑몰 프로젝트(ContextAPI, Hooks중심 : Providers, Contexts, Hooks)

React 14

JS Array Cheat Sheet

React Project : 쇼핑몰

프로젝트 개요

기본 컴포넌트 구성

ContextAPI를 통한 제품 정보 및 사용 함수 관리

context 만들기

Custom Context.Provider Component (with Children)

Context CustomHooks로 관리하기 (Hooks 폴더)

상품 목록 만들기 (Prototypes Component)

주문 목록 만들기 (Orders Component)

Provider Methods 로직 작성하기

공유하기

참고

[Design Pattern] MVC 패턴

[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야

[Node.js] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1)

[Node.js] 백준 - 함수&문자열 문제 : 셀프 넘버, 한수, 아스키 코드, 숫자의 합, 알파벳 찾기, 문자열 반복, 단어 공부, 단어의 개수, 상수, 다이얼, 크로아티아 알파벳, 그룹 단어 체커