[React] .map() 반복되는 데이터 처리하기

.map() : 반복되는 데이터 처리하는 방법

데이터가 1000개가 있다면? 해당 코드를 1000개를 작성해야한다.

<div className="list">
            <h3> {blogName} 
              <span onClick={() => { setLike(like + 1); }} > 👍 </span> {like} </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>

반복되는 데이터를 모두 이렇개 하나하나 작성하는 것은 ... 매우 비효율적이다.
이러한 반복데이터를 간결한 코드로 만들기 위해 .map()을 사용한다.

*자바스크립트 문법을 사용할때는 {} 중괄호 내에 사용해야한다.

map예시를 들기 위해 기본적으로 useState로 기본값, 블로그 이름 목록을 작성해둔다.

let [blogName, setBlogName] = useState([
    "코딩학원 추천",
    "온라인 코딩 강의 추천",
    "개발 블로그 추천",
  ]);

.map() 문법

반복할데이터.map((각 데이터요소)=>{return 반복할 내용 html})

• 반복할데이터의 개수만큼 반복된다.
• 각 데이터 요소, 모든 데이터요소가 {}중괄호 안에 짠 데이터로 순서대로 바뀐다.

names에 현재 4개의 이름데이터가 있다.
4개의 이름데이터가 name 각 이름이 순서대로 html의 {name}에 대입해서 출력된다.

 {blogName.map((name) => {
        return (
          <div className="list">
            <h3> {name}
              <span onClick={() => { setLike(like + 1); }}> 👍 </span> {like} </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>
        );
      })}