Lifecycle과 useEffect 질문있습니다.

[22]

강의명: Lifecycle과 useEffect 2 1분 39초를 따라하고 있는데요.
return문안에     return(
        <div>
            {
                alert==true?<div>초이내구매시할인</div>:setAlert=false
            }
        </div>
    );
이것도 드가고
    return(
        <div className="col-md-4">
        < img src={'https://codingapple1.github.io/shop/shoes'+props.i+'.jpg'} width="80%" />
        <h4>{ props.shoes[id].title }</h4>
        <p>{ props.shoes[id].price }</p>
      </div>
      )
이것도 드가서 첫번째 return만 작동되는데요.
도저히 몰라서 gpt에 물어보니 아래처럼 작성하라고 하는데요.( gpt 동작방식: alert==true?<div>초이내구매시할인</div>:setAlert=false
이부분을 삼항연산자 말고 if문으로 처리)
그런데 10분 5초에서
useEffect(()=>{return {}} [])<-unmount 1회 코드 실행하고 싶으면, 이 부분에서 return문이 꼭 쓰여야 한다고 하셨는데요. 결국 return을 2개를 쓰라는 의미로 받아들였는데요.
위에 언급한 return문 2개를 제대로 작동시키게 할려면 어떻게 작성해야하나요?

gpt 코드

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

function Detail(props) {
    let { id } = useParams();
    let 찾은상품 = props.shoes.find((x) => x.id === parseInt(id));
    let [Alert, setAlert] = useState(true);

    useEffect(() => {
        let timer = setTimeout(() => {
            setAlert(false);
        }, 3000); // 3초 후 사라짐

        return () => clearTimeout(timer);
    }, []);

    // 🔹 첫 번째 return (Alert 메시지만 표시)
    if (Alert) {
        return <div>⚡ 초이내 구매 시 할인 ⚡</div>;
    }

    // 🔹 두 번째 return (상품 정보 표시)
    return (
        <div className="col-md-4">
            {찾은상품 ? (
                <>
                    <img 
                        src={`https://codingapple1.github.io/shop/shoes${찾은상품.id + 1}.jpg`} 
                        width="80%" 
                        alt={찾은상품.title}
                    />
                    <h4>{찾은상품.title}</h4>
                    <p>{찾은상품.price}원</p>
                </>
            ) : (
                <p>❌ 상품을 찾을 수 없습니다.</p>
            )}
        </div>
    );
}

export default Detail;

• 이 게시글은 22에 의해 4 월, 3 주 전에 수정됐습니다.

[codingapple]

함수안에서 return문 2개 실행은 불가능하고 첫째 return만 실행되어서 하나만 씁시다
useEffect안의 return은 다른 함수안에 있는거라 상관없습니다

[22]

제코드는 아래와 같은데요. 어느부분을 수정해야 할까요?

import{useEffect, useState} from "react";
import { useParams } from "react-router-dom";
function Detail(props){
    let{id}=useParams();
    let 찾은상품=props.shoes.find(function(x){
        return x.id==parseInt(id)
    
    })
    let [Alert,setAlert]=useState(true)

    useEffect(()=>{
        let a= setTimeout(() => {
            setAlert(false)
        }, 100000);
        return()=>{clearTimeout(a)}
    },[])

    return(
        <div>
            {
                alert==true?<div>초이내구매시할인</div>:setAlert=false
            }
        </div>
    );

    // console.log(id);
    return(
        <div className="col-md-4">
        < img src={'https://codingapple1.github.io/shop/shoes'+props.i+'.jpg'} width="80%" />
        <h4>{ props.shoes[id].title }</h4>
        <p>{ props.shoes[id].price }</p>
      </div>
      )
}
export default Detail;

[codingapple]

{alert==true?<div>초이내구매시할인</div>:setAlert=false}
이런걸 <div className="col-md-4"> 안에 넣어봅시다 alert말고 Alert인듯요

[22]

선생님께서 말씀하신대로 변경햇는데도 2번째 return( 문이 vsc에서 접근할 수 없는 코드라고 나옵니다..

[22]

제가 생각해봤는데요.  return()=>{clearTimeout(a)} 문이 있는데 이     return(
        <div className="col-md-4">
        
            {
                Alert==true?<div>초이내구매시할인</div>:setAlert=false
            } 
문이 있어서 아래 리턴문이 작동 안된거 아닌가요?    
 return(         
<div className="col-md-4">         
< img src={'https://codingapple1.github.io/shop/shoes'+props.i+'.jpg'} width="80%" />

• 이 답변은 22에 의해 4 월, 2 주 전에 수정됐습니다.

[codingapple]

옮겼으면 첫 return은 지웁시다 useEffect콜백함수는 다른 함수라 return 있어도 상관없습니다

[글쓴이]

글