비디오 연습

더 많은 콘텐츠를 보려면 YouTube를 구독하세요.

Hook에 대한 기사 설명

이 기사에서는 후크를 사용하여 비디오 게임 상점과 장바구니를 만듭니다.

먼저 useState 후크를 사용하는 예를 보여드리겠습니다.

import React, { useState } from "react";

const Shop = () => {
  const [open, setOpen] = useState(true);
  console.log(open)

  const closeStore = () => {
    setOpen(false)
}
  return(
    <div>
    <input type="submit" value="close" onClick={() => closeStore()} />
    </div>
)
}

export default Shop;

이 예에서 open은 useState 인수를 값으로 보유하는 키입니다. useState(true), open = true.

setOpen은 값을 인수로 취하는 함수입니다.

setOpen은 setOpen에 전달된 새 값으로 open을 설정합니다.

setOpen(false), open = false로 설정

이것은 open 값을 true에서 false로 변경하기 위해 클릭할 수 있는 버튼을 보여줍니다.

좀 더 복잡한 사용 사례를 시도해 보겠습니다.

App.js에서 곧 생성될 Shop 구성 요소와 함께 div를 반환합니다.

import React from "react";
import Shop from "./shop/Shop";

function App() {
  return (
    <div>
      <Shop />
    </div>
  );
}

export default App;

다음에는 상점 구성 요소를 생성합니다. shop이라는 이름의 src에 폴더를 만듭니다. 그런 다음 Shop.js라는 폴더에 파일을 만듭니다.

완성된 Shop.js 코드는 기사 하단에 있습니다.

시작하기 위해 빈 기능 구성 요소를 반환할 것입니다.

import React, { useState, useEffect } from "react";

const Shop = () => {
    return <div />
}

export default Shop;

인벤토리를 항목 레이블이 지정된 배열로 추가해 보겠습니다.

const Shop = () => {
  const items = [
    {
      id: 1,
      name: "overwatch",
      price: 20,
    },
    {
      id: 2,
      name: "minecraft",
      price: 32,
    },
    {
      id: 3,
      name: "fortnite",
      price: 51,
    },
  ];
  return <div />
}

이 세 가지 비디오 게임만 판매합니다. 우리는 그것들을 보여줄 필요가 있습니다. 따라서 .map()을 사용하여 listItems라는 새로운 형식의 배열을 만듭니다. 이제 listItems를 반환해야 합니다.

  const listItems = items.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="add" onClick={() => addToCart(el)} />
    </div>
  ));

return(<div>{listItems}</div>)

항목 위의 첫 번째 useState 후크를 만듭니다.

const [cart, setCart] = useState([]);

const 카트는 카트 상태를 유지하는 곳입니다. setCart()를 호출하고 장바구니에 만들고자 하는 상태 변경을 전달할 수 있습니다. setCart를 사용하여 addToCart 함수를 생성해 보겠습니다.

  const addToCart = (el) => {
      setCart([...cart, el]);
  };

addToCart는 선택한 요소를 가져와 카트 배열에 추가합니다.

우리는 우리 앱의 상점 아래에 카트를 표시할 것입니다. 먼저 카트 배열에서 새로운 형식의 배열을 만듭니다.

  const cartItems = cart.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="remove" onClick={() => removeFromCart(el)} />
    </div>
  ));

filter 메소드를 사용하여 removeFromCart 함수를 생성할 수 있습니다. 참고* 필터링하기 전에 장바구니 상태를 복사합니다.

  const removeFromCart = (el) => {
    let hardCopy = [...cart];
    hardCopy = hardCopy.filter((cartItem) => cartItem.id !== el.id);
    setCart(hardCopy);
  };

cartItems를 포함하도록 반품 명세서를 변경합니다.

  return (
    <div>
      STORE
      <div>{listItems}</div>
      <div>CART</div>
      <div>{cartItems}</div>
    </div>
  );

마지막으로 useState 및 useEffect를 사용하여 총계를 추적합니다.

  const [cartTotal, setCartTotal] = useState(0);

  useEffect(() => {
    total();
  }, [cart]);

  const total = () => {
    let totalVal = 0;
    for (let i = 0; i < cart.length; i++) {
      totalVal += cart[i].price;
    }
    setCartTotal(totalVal);
  };

useEffect 후크에는 화살표 함수가 포함되어 있습니다. 화살표 함수 내에서 total 함수를 호출합니다.

useEffect의 두 번째 인수는 [cart]를 포함하는 종속성 배열입니다.

useEffect는 종속성 배열 내에서 명명된 변수의 변경 사항을 감지합니다. 변경 사항을 감지하면 다시 실행됩니다.

장바구니에 항목이 추가되거나 제거될 때마다 useEffect는 장바구니의 변경 사항을 감지하고 전체 기능을 실행합니다.

마지막으로 반품에 합계를 넣으십시오.

import React, { useState, useEffect } from "react";

const Shop = () => {
  const [cart, setCart] = useState([]);
  const [cartTotal, setCartTotal] = useState(0);
  const items = [
    {
      id: 1,
      name: "overwatch",
      price: 20,
    },
    {
      id: 2,
      name: "minecraft",
      price: 32,
    },
    {
      id: 3,
      name: "fortnite",
      price: 51,
    },
  ];

  useEffect(() => {
    total();
  }, [cart]);

  const total = () => {
    let totalVal = 0;
    for (let i = 0; i < cart.length; i++) {
      totalVal += cart[i].price;
    }
    setCartTotal(totalVal);
  };

  const addToCart = (el) => {
      setCart([...cart, el]);
  };

  const removeFromCart = (el) => {
    let hardCopy = [...cart];
    hardCopy = hardCopy.filter((cartItem) => cartItem.id !== el.id);
    setCart(hardCopy);
  };

  const listItems = items.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="add" onClick={() => addToCart(el)} />
    </div>
  ));

  const cartItems = cart.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="remove" onClick={() => removeFromCart(el)} />
    </div>
  ));

  return (
    <div>
      STORE
      <div>{listItems}</div>
      <div>CART</div>
      <div>{cartItems}</div>
      <div>Total: ${cartTotal}</div>
    </div>
  );
};

export default Shop;

자세한 내용은 동영상을 시청하세요! 다음으로 Redux를 사용하도록 이 코드를 리팩토링합니다. 그런 다음 fetch api 및 redux-thunk를 사용하여 http 요청을 시작합니다. 마지막으로 프로젝트를 redux-saga로 변환합니다. 영상은 이미 유튜브에 올라와 있고 기사도 올라오고 있습니다!