강의명 : "map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때"
위 강의 숙제 진행간 궁금한 사항이 있어 문의드립니다.
아래 코드는 굵은색 표시 외에는 같은 코드입니다.
첫번째 코드처럼 함수로 만들어서 실행하면 왜 안되고 두번째 코드로 작성하면 왜 실행이 정상적으로 되는지 이유가 궁금합니다.
감사합니다.
첫번째코드
--------------
/*eslint-disable*/
import React, {useState} from 'react';
import './App.css';
function App() {
let [글제목,글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','KT 맛집']);
let [따봉, 따봉변경] = useState([0,0,0,0,0,0]);
function 변경(k){
var copy = [...따봉];
copy[k]=copy[k]+1;
따봉변경(copy);
}
return (
<div className="App">
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
{
글제목.map(function(a,i){
return(
<div className='list' key={i}>
{/* <h4>{a}</h4> */}
<h4>{글제목[i]}<span onClick={변경(i)}>👍</span> {따봉[i]}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
)
})
}
</div>
);
}
export default App;
-------------
두번째 코드
/*eslint-disable*/
import React, {useState} from 'react';
import './App.css';
function App() {
let [글제목,글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','KT 맛집']);
let [따봉, 따봉변경] = useState([0,0,0,0,0,0]);
return (
<div className="App">
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
{
글제목.map(function(a,i){
return(
<div className='list' key={i}>
{/* <h4>{a}</h4> */}
<h4>{글제목[i]}<span onClick={()=>{
let copy = [...따봉];
copy[i]=copy[i]+1;
따봉변경(copy);
}}>👍</span> {따봉[i]}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
)
})
}
</div>
);
}
export default App;
-------------
