React) 같은 구조를 반복처리 map

map 함수

[1,2,3].map(function(item,index){
	실행구문; 
})

1. array 자료 개수만큼 함수안의 코드를 실행
2. 첫번째 파라미터인 item에는 array속 자료, 두번째 파라미터인 index에는 순번.
3. return 안의 구문은 array로 담아줌.

map함수를 활용해 같은 html구조를 반복생성해보자

우선 반복문 구조만 생성

//state지정 부분
let [글제목, 글제목변경함수] = useState(['여자 신발 추천', '강남 하이볼 맛집', '파이썬 독학',]);
let [따봉, 따봉변경함수] = useState(0);


//state로 구조 반복문 출력
{
  글제목.map(function(item, index){
  	return(
      <div className="list" key={i}>
      	<h4>{item}<span>👍</span>{따봉}</h4>
    	<p>5월 17일 발행</p>
	  </div>
	)
  })
}

html구조 영역에 스크립트를 쓰는 것이니 {}안에 구문을 넣어야함.
글제목 status의 배열 값들을 .map함수의 item인자로 받아오고 그걸 h4태그 안에서 {item}으로 출력한다. 글제목[index]해도 똑같다.

key={i} 참고로 map반복문으로 생성한 html에서는 key순번값을 추가해야한다. 그래야 리액트가 div를 각각 구분할 수 있음.

---

반복문 구조생성 + 이벤트 다시 다 달아주기

//state지정 부분
let [글제목, 글제목변경함수] = useState(['여자 신발 추천', '강남 하이볼 맛집', '파이썬 독학',]);
let [따봉, 따봉변경함수] = useState(0);


//state로 구조 반복문 출력
{
  글제목.map(function(item, index){
    return(
      <div className="list" onClick={()=>{
      	setModal(!modal);
      }}>
       	<h4 onClick={()=>{
    		따봉변경함수(따봉 + 1)
  		}}>{item} 
			<span>👍</span>{따봉}
		</h4>
    	<p>5월 17일 발행</p>
	  </div>
	)
 })
}

문제발생

따봉의 숫자가 모든 list에 추가되는 모습.

  let [따봉, 따봉변경함수] = useState(0);

지금은 state를 하나만 만들어 연결해두었기 때문!
아 그럼 각각 list 개수만큼 state만들면 되겠네요?

let[따봉, 따봉변경함수] = useState(0);
let[따봉1, 따봉변경함수] = useState(0);
let[따봉2, 따봉변경함수] = useState(0);

아악.. 그럼 만약 list가 100개면 100개 만들건가요..
let [따봉, 따봉변경] = useState([0,0,0]); 이렇게 배열에 넣어서 돌리면 편할 것 같은데.

{ 
   글제목.map(function(a, i){
      return (
        <div className="list">
          <h4>{ 글제목[i] } 
            <span onClick={()=>{ ??? }}>👍</span> {따봉[i]} 
          </h4>
          <p>2월 18일 발행</p>
        </div> )
  }) 
}

그럼 이제 onclick안에는

0번째 좋아요 버튼 클릭하면 따봉[0] + 1하고
1번째 좋아요 버튼 클릭하면 따봉[1] + 1하고
2번째 좋아요 버튼 클릭하면 따봉[2] + 1하고
하면 되니까,,

{
        글제목.map(function(item, index){
          return(
            <div className="list" onClick={()=>{
                setModal(!modal);
            }}>
            <h4>{item} 
              <span onClick={()=>{
                let copy = [...따봉];
                copy[index] = copy[index] + 1;
                따봉변경함수(copy);
              }}>👍</span> {따봉[index]}
            </h4>
            <p>5월 17일 발행</p>
            </div>
          )
        })
      }

짜잔 잘된당