리액트 map 함수를 이용하여 div 줄이기

/* eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
    
      <div className="list">
        <h4>{글제목[0]}</h4>
        <p>2월 17일 발행</p>
      </div>
		
	  <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      
      
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      
    </div>
  );
}


export default App;

위의 코드를 보면 div창들이 똑같은 내용들을 가지고 있지만, 일일히 하나씩 다 작성이 된것을 볼 수있다.
여기서는 글을 3개를 작성했으니 가능하지만, 규모가 커지면 커질수록 효율이 떨어진다. 이럴때 map 함수를 통해 중복되는 내용을 가진 div 창들을 줄여줄 수 있다.

• ❓ map 함수란 ❓
  자바스크립트 배열 메서드 총정리

/* eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
    
      {
        글제목.map((a, i) => {
          return (
        <div className="list" key={i}>
        <h4>{글제목[i]}<span onClick={() => {return 좋아요갯수변경(좋아요갯수+1)}}> 👍 </span>{좋아요갯수}</h4>
        <p>2월 17일 발행</p>
      </div>
          )
        })
      }
   
    </div>
  );
}


export default App;

글제목이 배열의 형식이니까, 글제목.map() 을 통하여 비슷한 내용을 담은 div창을 띄어주었다.

❗️ 주의 사항 ❗️

• map은 자바스크립트 문법이므로 사용 할때는 { } 로 감싸주어야한다.
• map 반복문으로 반복생성한 html에는 key={i} 를 붙여주어야한다. 그래야지 리액트에서 각각의 div들을 구분할 수 있기 때문이다.

❗️ 근데 여기서 문제가 발생 했다 좋아요 수를 글마다 따로따로 갯수가 바뀌도록 해야하는데, 글제목1의 👍 를 눌러도 글제목2와 3에 해당되는 좋아요 수가 다 변경됐다.
각각 따로 좋아요 수를 변경되게 하려면 어떻게 해야할까?

/* eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);
  let [좋아요갯수, 좋아요갯수변경] = useState([0, 0, 0]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
    
      {
        글제목.map((a, i) => {
          return (
        <div className="list" key={i}>
        <h4>{글제목[i]}<span onClick={() => {
          let copy = [...좋아요갯수];
          copy[i] = copy[i] + 1;
          좋아요갯수변경(copy)
        }}> 👍 </span>{좋아요갯수[i]}</h4>
        <p>2월 17일 발행</p>
      </div>
          )
        })
      }
   
    </div>
  );
}

일단 값이 변경 되어야 하는 것이니까 state를 좋아요 갯수를 담은 배열로 변경을해준다.

👍 을 누를때마다 해당하는 이모티콘의 좋아요갯수가 올라야 하는거니

좋아요갯수[0] = 좋아요갯수[0] + 1
좋아요갯수[1] = 좋아요갯수[1] + 1
좋아요갯수[2] = 좋아요갯수[2] + 1

저번에 했던 스프레드 문법을 통하여 복사본을 하나 만들어줘서 값을 변경시켜주면 된다.