안녕하세요, 선생님,
개별 따봉 기능 구현에서 함수를 직접만들어 이벤트 핸들러에 등록 시킬 때
<span onClick={ onClick(idx) }>?</span> 로 하면 오류가 발생되고
<span onClick={ () => { onClick(idx) }}>?</span> 로 하면 정상 실행이 되는지 이해가
되지 않아 질문드립니다.
import './App.css';
import React, { useState } from 'react';
function App() {
let [changeTitle, setChangeTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '강북 우동 맛집']);
let [tabon, setTabon] = useState([0, 0, 0])
let [modal, setModal] = useState(false)
const onClick = idx => {
let count = [...tabon];
count[idx] += 1
setTabon(count)
}
const onClick1 = e => {
const newArray = [...changeTitle];
(newArray[0] === '남자 코트 추천') ? newArray[0] = '여자 코트 추천' : newArray[0] = '남자 코트 추천'
setChangeTitle( newArray );
}
const onClickSort = (e) => {
let changeSortTitle = [...changeTitle].sort();
setChangeTitle(changeSortTitle)
}
const onClickModal = e => {
setModal(!modal)
}
return (
<div className="App">
<div className='black-nav'>
<div>My Dev Blog</div>
</div>
<div classNAme="buttons">
<button onClick={onClickSort}>상품 정렬</button>
<button onClick={onClick1}>성별 변경</button>
<button onClick={onClickModal}>{ modal ? "모달 닫기" : "모달 열기"}</button>
</div>
{
changeTitle.map( (_, idx) => {
return (
<div className="list">
<h3> { changeTitle[idx] } <span onClick={ () => { onClick(idx) }}>?</span>{tabon[idx]}</h3>
<p>2월 17일 발행</p>
<hr />
</div>
)
})
}
{
modal ? <Modal /> : null
}
</div>
);
}
const Modal = () => {
return (
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
