제목을 누를때 각각 다른 모달창이 뜨게 하려면?
1. 0,1,2번째 중 몇번째 제목을 눌렀는지 상태정보를 state로 저장
2. state가 0일때는 0번째 제목을 출력, state가 1일때는 1번째 제목을 출력해주면 될거 같다!!
우선 연습을 위해 버튼을 만들어주자
<button onClick={()=>{}}>버튼1</button>
<button onClick={()=>{}}>버튼2</button>
<button onClick={()=>{}}>버튼3</button>
function Modal({ name }) {
return (
<>
<div className="modal">
<h2>{name[1]}</h2>
<p>날짜</p>
<p>상세 내용</p>
</div>
</>
);
}
하드 코딩 되어있는 name[1]이 각각 name[0], name[1], name[2]로 변하게 만들어주면 될거 같다
state를 하나 만들어주자
let [titleNum, setTitleNum]=useState(0);
titleNum은 부모의 state이기때문에 Modal 컴포넌트에 props로 전달해주자
<Modal name={글제목} titleNum={titleNum}/>
.
.
.
function Modal({ name, titleNum }) {
return (
<>
<div className="modal">
<h2>{name[titleNum]}</h2>
<p>날짜</p>
<p>상세 내용</p>
</div>
</>
);
}
Modal 컴포넌트에 titleNum의 값 0이 전달 되었다
이제 버튼을 누를때마다 state값이 변하게만 해주면 될것이다!!!!!!!
<button onClick={() => {setTitleNum(0);}}>버튼1</button>
<button onClick={() => {setTitleNum(1);}}>버튼2</button>
<button onClick={() => {setTitleNum(2);}}>버튼3</button>
각각 버튼을 눌렀을때 state값이 바뀌도록 해주면 끝!!!
각각의 버튼을 누를때마다 다른 제목이 잘나온다ㅎㅎ
글제목을 눌렀을때 이제 각각 다른 모달창이 뜨게 합시다
코드를 살짝만 바꿔주면 된다
map함수의 두번째 인자를 활용
{글제목.map((item, i) => {
return (
<div className="list">
<h3 onClick={() => {setTitleNum(i);}}>
{item}
<span
onClick={() => {
setCount(count + 1);
}}
>
💖
</span>
{count}
</h3>
<p>2월 18일 발행</p>
<hr />
</div>
);
})}
map함수의 두번째 인자 i는 반복문이 돌때마다 0,1,2..가 되는 변수이다
비슷한 방식으로 좋아요 버튼을 눌렀을때 각각의 제목에서 카운팅 되도록 만들었다
.
.
.
let [likeCount, setLikeCount] = useState([0, 0, 0]);
const likeCountFunc = (i) => {
let copyCount = [...likeCount];
copyCount[i]++;
setLikeCount(copyCount);
};
return (
<div className="App">
<div className="black-nav">
<div>개발 블로그</div>
</div>
{글제목.map((item, i) => {
return (
<div className="list">
<h3
onClick={() => {
setTitleNum(i);
}}
>
{item}
<span
onClick={() => {
likeCountFunc(i);
}}
>
💖
</span>
{likeCount[i]}
</h3>
<p>2월 18일 발행</p>
<hr />
</div>
);
})}
.
.
.
굳ㅎㅎ
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)