2023.11.01 + 토글 버튼 만들기

import React, { useState } from "react";
import styled from "styled-components";
import Product from "./components/Product";

const Container = styled.div`
  max-width: 480px;
  margin: 10px auto;
  text-align: center;
`;
const ToggleButton = styled.button``;

const AppToggle = () => {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow((show) => !show);
  };
  return (
    <Container>
      <ToggleButton onClick={handleClick}>토글버튼</ToggleButton>
      {show && <Product></Product>}
    </Container>
  );
};

export default AppToggle;

import React from "react";

const Product = () => {
  //products.json --> fetch사용
  return (
    <div>
      <h1>Show products!!!</h1>;
      <ul>
        <li>name:마우스</li>
        <li>price:1000</li>
        <li>id:1234</li>
      </ul>
    </div>
  );
};

export default Product;