애니메이션 주기 시작하면서 className이 적용되지 않습니다

[안성현]

위 파일은 선생님 수업에서 detail.js 파일이고

import '../App.css';
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import styled from "styled-components";
import './Semi.css';
import Nav from 'react-bootstrap/Nav';

function Semi(props) {

  let [alert, setAlert] = useState(true);
  let [탭, 탭변경] = useState(0);
  let [num, setNum] = useState('');
  useEffect(() => { //mount, update시 실행됨
    let a = setTimeout(() => { setAlert(false) }, 2000)
    return () => {//useEffect 동작전에 실행되는 것 return()=>{}
      clearTimeout(a) //타이머를 제거해주는 함수
    }
  }, [])

  useEffect(() => {
    if (isNaN(num) == true) {
      alert("숫자만 입력가능합니다")
    }
  }, [num])

  let { id } = useParams();
  //  let 찾은상품 = props.shoes.find(function(x){
  //   return x.id == id;
  //  })
  let 찾은상품 = props.shoes.find((x) => x.id == id);

  // .find() 문법을 사용하면 array자료 안에서 원하는 항목만 가져올 수 있다

  return (
    <div className="container">
      {alert == true ?
        <div className="alert alert-warning">
          2초이내 구매시 할인
        </div> : null
      }
      <div className="row">
        <div className="col-md-6">
          < img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>

        <div className="col-md-6">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>   {/*처음 만든 키를 눌려있게 하고 싶으면 defaltActiveKey를 사용한다*/}
      
      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link onClick={()=>{탭변경(0)}} eventKey="link0">버튼1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={()=>{탭변경(1)}} eventKey="link1">버튼2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={()=>{탭변경(2)}} eventKey="link2">버튼3</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent 탭={탭} />
    </div>
  )
}

function TabContent({탭}) {
  let [fade,setfade] = useState('')
  
  useEffect(()=>{
    setfade('end')
  },[탭])

 return(<div className={`start ${fade}`}>
 { [<div>내용0</div>,<div>내용1</div>,<div>내용2</div>][탭]}
 </div>)
}

export default Semi; 
 

 이파일은 App.css 파일입니다

.start {
  /* 투명도 주는 스타일 opacity */
  opacity: 0; 
}
.end {
  opacity: 1;
  transition: opacity 0.5s;
}

.main-bg{
  height: 300px;
  background-image: url(./img/bg.jpg);
  background-size: cover;
  background-position: center;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

[codingapple]

변수명으로 alert는 쓰지맙시다

[글쓴이]

글