리액트 공식 문서 정리(6) - 리스트와 Key

Jessie H·2022년 9월 7일
0

react

목록 보기
7/13
post-thumbnail

map으로 반복되는 JSX 찍어내기 설명

대충 props.days가 ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]라고 하면

function example({days}) {
   return (
     <div>
        <h1>{day[0]}</h1>
        <h1>{day[1]}</h1>
        <h1>{day[2]}</h1>
        <h1>{day[3]}</h1>
        <h1>{day[4]}</h1>
        <h1>{day[5]}</h1>
        <h1>{day[6]}</h1>
     </div>
   );
}

//map으로 반복
function example ({days}) {
  return (
    <div>
      days.map((day) => {
        return <h1 key={day}>{day}</h1>;
      });
    </div>
  );
}

map을 통해 반복되는 부분은 찍어낼 수 있다!
단 반복되는 JSX에 꼭 Key를 넣어야한다.

  • key는 형제 안에서 고유한 값이어야한다.

map이 너무 반복될 경우, 그냥 컴포넌트로 빼는 것이 좋다

profile
코딩 공부 기록장

0개의 댓글