안녕하세요 선생님!
onClick 이벤트 생성시 state 변경함수를 이용하면서 문제가 생겨서 질문드립니다.
onClick={() => {
(들어갈 효과)
}}
이렇게 하지 않고,
function 변경함수(){
(들어갈 효과)
}
onClick={변경함수}
이렇게 정리하고 있었습니다.
그런데 onClick={변경함수()}이렇게 하면 오류가 납니다.
그래서 변경함수(a,b) 이렇게 변수를 넣고 싶어도 넣을 수가 없는 경우가 생깁니다.
그렇다면 onClick 이벤트 핸들러에서는 변경함수에 대한 파라미터를 쓸 수 없는 건가요? 쓴다면 어떻게 쓰게 되나요?
아래는 제가 작성한 코드와 에러나는 부분을 수정한 코드입니다.
let [title, setTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '자바스크립트 독학']);
let [likeCount, setLikeCount] = useState([0,0,0]);
function likeCountUp(num){
let copy = [...likeCount];
copy[num] = copy[num]+1;
setLikeCount(copy);
}
return (
{
title.map(function(a, i){
return (<div className="list" key={i} onClick={modalShowHide}>
<h4>{a}<span style={{cursor:'pointer'}} onClick={likeCountUp(i) <--- 에러나는 부분 }>👍</span> {likeCount[i]}</h4>
<p>2월 17일 발행</p>
</div>)
})
}
////에러 막으려고 수정한 코드////
{
title.map(function(a, i){
return (<div className="list" key={i} onClick={modalShowHide}>
<h4>{a}<span style={{cursor:'pointer'}} onClick={() => {
let copy = [...likeCount];
copy[i] ++;
setLikeCount(copy);
}}>👍</span> {likeCount[i]}</h4>
<p>2월 17일 발행</p>
</div>)
})
}
)
감사합니다.
