강의 잘 듣고있습니다.
따봉 개별적으로 하는 코드 시도해보고있습니다.
핵심 코드 부분만 올리겠습니다.
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동 맛집",
"파이선 독학",
]);
let [따봉, 따봉변경] = useState([0, 0, 0]);
function 반복된UI() {
var 어레이 = [];
for (var i = 0; i < 3; i++) {
어레이.push(<div key={i}>안녕</div>);
}
return 어레이;
}
{글제목.map(function (글, idx) {
return (
<div className="list" key={idx}>
<h3>
<strong> {글}</strong>
<span
onClick={() => {
console.log(idx);
let copy = [...따봉];
copy[idx]++;
따봉변경(copy);
}}
>
? {따봉[idx]}
</span>
</h3>
<p>2/10발행</p>
<hr />
</div>
);
})}
{반복된UI()}
질문 2가지 정도 드립니다.
맵함수로 list , 반복된UI 함수로 만들어보고있습니다.
<ol>
<li>map 함수 인자 (글, idx)에서 h3 태그 밑에 굵게 쓴 {글} 이부분 {글제목[idx]}로 바꿔도 동작 하는데
보편적으로 {글} 이런식으로 사용하나요?</li>
<li> 유니크한 key-props를 가지라고 하는데, 위에서 사용한 것처럼
반복된 UI함수 내에서 어레이.push(<div key={i}>안녕</div>);
맵 함수에서 <div className="list" key={idx}> 이런식으로 사용하면 되나요?</li>
</ol>
