화면크기에 따른 반응형 이미지와 삭제 버튼 기능

내용

• 디바이스의 너비가 610px 미만인 경우 너비는 85vw, 화면 세로 중앙 정렬.
• 디바이스의 너비가 610px 초과인 경우 너비는 300px, 가로정렬.
• 삭제버튼 클릭시 이미지 삭제.

결과

코드

import styled from "styled-components";
import { useState } from "react";

export default function App() {
  const [button, setButton] = useState([
    {
      id: 1,
      src: "IMG/반응형이미지1.jpeg"
    },
    {
      id: 2,
      src: "IMG/반응형이미지2.jpeg"
    },
    {
      id: 3,
      src: "IMG/반응형이미지3.jpeg"
    }
  ]);

  const onRemove = id => {
    // 일치하지 않는 원소만 추출해서 새로운 배열을 만듦
    //filter를 사용하여 false인 값만 담는다
    setButton(button.filter((list) => list.id !== id));
  };

  return (
    <section>
      {button.map((list, index) => {
         console.log(list.key);
        return (
          <span key={list.id} >
            <Img art={list.src} src={list.src} />
            <button id={list.id} onClick={() => onRemove(list.id)}>
              Delete
            </button>
          </span>
        );
      })}
    </section>
  );
}

const Img = styled.img`
  width: 300px;
  height: 300px;

  @media screen and (max-width: 610px) {
    width: 85vw;
    height: 85vw;
    flex-direction: column;
  }
`;