지금까지 컴포넌트 안에서 if문 쓸떄 못쓰는걸로 알고 삼항연산자 그걸로 했는대
최근본상품을 구현해볼려고 하면서 하는데 다른건 다 안되다가 한번 그냥 안에 함수를 하나 더만들어서 거기다가 if문으로 되니까
구현에 성공했는대 이게 컴포넌트안에 리턴안에 모든 코드가 들어있는데 잘동작하더라구요??
return 안에 있는데 되는이유가 그냥 return 안에 함수를 더 만들면 그 함수안에서는 잘동작하는건가요?
if문을 쓸려면 return 밖에 쓰라고 되있어서 질문드려요
코드는 이렇습니다
function List(props){
let navigate = useNavigate();
return(
<>
<div className="main-bg"></div>
<div className='container mt-5'>
<div className='row'>
{ props.shoes.map((a,i)=>{
function 로컬(){
let 꺼낸거 = JSON.parse(localStorage.getItem('watched'));
if(꺼낸거.findIndex((꺼낸거)=>{ return 꺼낸거 == props.shoes[i].id}) >= 0){
return false;
}else{
꺼낸거.push(props.shoes[i].id);
localStorage.setItem('watched',JSON.stringify(꺼낸거))
}
}
return(
<div className='col-md-4' key={props.shoes[i].id} style={{cursor:'pointer'}} onClick={()=>{
{
localStorage.getItem('watched') == '[]' ? localStorage.setItem('watched',JSON.stringify([props.shoes[i].id])) : 로컬();
}
navigate(`/detail/${i}`)
}}>
< img src={'https://codingapple1.github.io/shop/shoes' +parseInt(props.imgCount+i) + '.jpg'} width="80%"/>
<h4>{props.shoes[i].title}</h4>
<p>{props.shoes[i].price}</p>
</div>
)
})
}
</div>
</div>
</>
)
}
