[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>
);
})}
Author And Source
이 문제에 관하여([React] .map() 반복되는 데이터 처리하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@estell/React-.map-반복되는-데이터-처리하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)