질문있습니다

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import styled from 'styled-components';

function Detail(props) {

let Box = styled.div `
 padding : 20px;
 color : grey;
`;

let YellowBox = styled.div `
 background: yellow;
 padding : 10px;
 position : absolute;
 left : 100px;
 top : 100px;
`

let YellowBtn = styled.button`
 background : yellow;
 color : black;
 padding : 10px;
`;

 
let {id} = useParams();
let findItem = props.shoes.find((x) => x.id == id);
let [showYellowBox, setShowYellowBox] = useState(true);
let [countDown, setCountDown] = useState(6);
 
useEffect(() => {
setInterval(() => {
setShowYellowBox(false)}, 6000);
}, )

setInterval(() => {
countDown--;
setCountDown(countDown)
}, 1000);

// 선생님 여기서 질문있습니다 혹시 useEffect안에 setInterval 두개를 넣으면 countDown이 6에서 4로 확 넘어가버리는데 setInterval(() => {
countDown--;
setCountDown(countDown)
}, 1000); 
--> // 요 코드를 useEffect 밖에 쓰는거랑 안에 쓰는거랑 무슨 차이가 있나요?? useEffect는 html이 재랜더링 될떄마다 실행되는 것이라고 알고 있는데
// 어떤 식으로 동작하는지 감이 오지 않습니다...

return (
<div>
{
showYellowBox == true ? <YellowBox>{countDown}초 이내 구매시 할인</YellowBox> : null
}
<div className="container">
<div className="row">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{findItem.title}</h4>
<p>{findItem.content}</p>
<p>{findItem.price}원</p>
<button className="btn btn-danger">주문하기</button>
</div>
 
</div>
 )
}
export default Detail;