따봉버튼 만드는거에 대해서

[황원동]

https://github.com/hwd3004/react_blog/commit/8a20483d6f5825ebf84245979986a39e9f7f7df0

map 함수로 div들을 반복문으로 만들고 나서,

let [제목, 제목변경] = useState(["NodeJS", "ReactJS", "Django"]);
let [따봉, 따봉변경] = useState(0);

원래 이렇게 하던 것을

let [글제목, 글제목변경] = useState([
    { title: "NodeJS" },
    { title: "ReactJS" },
    { title: "Django" },
  ]);

  글제목.forEach((key) => {
    key.good = 0;
    console.log(key);
  });

객체로 바꿨습니다.

{글제목.map((index) => {
        return (
          <div className="list">
            <h3>
              {index.title}
              <span
                onClick={() => {
                  console.log(index);
                  글제목변경(index.good + 1);
                }}
              >
                ?{index.good}
              </span>
            </h3>
            <p>9월 22일 발행</p>
            <hr />
          </div>
        );
      })}

그런데 따봉 클릭시 숫자 증가는 어떻게 해야할지 모르겠습니다.
글제목변경(글제목[i].good + 1);
이런식으로 하려하니 몇번째 배열인지 알려줄 방법도 모르겠고...
console.log(index); 해보니 클릭한 해당 객체만 콘솔창에 뜨긴하는데...
가르침 부탁드립니다.

[codingapple]

1. 

{ good : 0 } 이라는 항목을 useState 이후에 반복문으로 추가하신거같은데 

일단 권장하는 바는 글제목.forEach 미리 해둔 Array를 useState 안에 집어넣는게 좋을 것 같습니다. 

 

2. 

글제목변경() 함수는 소괄호안에 뭔가를 넣으면 넣은걸로 state 전체를 통째로 바꿔줍니다. 

그래서 함수 소괄호안에는 변경하고 싶은 데이터만 집어넣는게 아니라 변경사항을 반영한 state를 통째로 집어넣으시면 됩니다. 

아마 위의 상황에서는 첫째 버튼을 누르면 [ { title: "NodeJS", good : 1 },  { title: "ReactJS", good : 0 }, ... ]  이걸 집어넣으면 되겠군요. 

 

3. map() 함수안에 두개의 파라미터를 집어넣을 수 있습니다.

글제목.map(  (data, i)=>{} ) 이렇게 쓰시면 첫째 파라미터는 글제목 안에있던 하나하나의 데이터를 뜻하고 둘째는 0,1,2,3.. 이렇게 증가하는 정수입니다.

힌트는 여기까지입니다.  아마 뒤의 강의에서 전부 다루는 내용들일겁니다.  

 

 

[글쓴이]

글