리액트 개별 따봉 관련 문의드립니다.

[심정우]

<div className="list">
  <h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경( [따봉[0] + 1, 따봉[1] , 따봉[2]] ) }}>?</span> { 따봉[0] } </h3>
  <p>2월 18일 발행</p>
  <hr/>
</div>
<div className="list">
  <h3> { 글제목[1] } <span onClick={ ()=>{ 따봉변경( [따봉[0], 따봉[1] + 1, 따봉[2]] ) }}>?</span> { 따봉[1] } </h3>
  <p>2월 18일 발행</p>
  <hr/>
</div>
<div className="list">
  <h3> { 글제목[2] } <span onClick={ ()=>{ 따봉변경( [따봉[0], 따봉[1], 따봉[2] + 1] ) }}>?</span> { 따봉[2] } </h3>
  <p>2월 18일 발행</p>
  <hr/>
</div>

안녕하세요.

위와 같이 작성해서 개별 따봉수가 올라가게끔 해두었습니다.

이제 이걸 map 함수로 구현해보고 싶은데 감이 잘 안오네요ㅠ 

조언 부탁드립니다!

[codingapple]

버튼0을 누르면

let copy = [...따봉]

copy[0]++

따봉변경( copy )

 

버튼1을 누르면

let copy = [...따봉]

copy[1]++

따봉변경( copy )

 

~~ 이런 식으로 코드를 짜놓으면 map으로 축약하기 쉽지않을까요 

 

[심정우]

가르쳐주신대로 수정 후 map을 사용하려는데

글제목.map 이랑 어떤식으로 써야할지 감이 안오네요ㅠㅠ 

힌트 좀 주세요!

[codingapple]

코드를 어떻게 짜셨습니까

[심정우]

<div className="list">
<h3>
{ 글제목[0] }
<span onClick={ ()=>{ let copy=[...따봉]; copy[0]++; 따봉변경(copy) }}>?</span>
{ 따봉[0] }
</h3>
<p>2월 18일 발행</p>
<hr/>
</div>
<div className="list">
<h3>
{ 글제목[1] }
<span onClick={ ()=>{ let copy=[...따봉]; copy[1]++; 따봉변경(copy) }}>?</span>
{ 따봉[1] }
</h3>
<p>2월 18일 발행</p>
<hr/>
</div>
<div className="list">
<h3>
{ 글제목[2] }
<span onClick={ ()=>{ let copy=[...따봉]; copy[2]++; 따봉변경(copy) }}>?</span>
{ 따봉[2] }
</h3>
<p>2월 18일 발행</p>
<hr/>
</div>

 

이렇게 작성했습니다!

[codingapple]

그럼

글제목.map((a,i)=>{

return ( )

})

이렇게 사용하고 return 안에는 <div className="list"> 안에 있는 모든 내용물을 다 집어넣으면 되겠군요 그 전체가 계속 중복되니까요 

 

근데 반복시킬 때  

copy[0]++;

이 부분의 0이라는 숫자는 그대로 쓰는게 아니라 반복되면서 0,1,2로 변경되는 변수를 집어넣으면 되겠습니다 

 

[심정우]

감사합니다!

[글쓴이]

글