계획

리액트 강의 듣기

• 3-3 리액트 반복문(key)
• 3-4 컴포넌트 분리와 props
• 3-5 주석과 메서드 바인딩

3-3 리액트 반복문(key)

map으로 배열을 이용

<ul>
          {[
            ["사과", "맛있다"],
            ["바나나", "싫다"],
            ["포도", "맛없다"],
            ["귤", "귀찮다"],
            ["오렌지", "시다"],
          ].map((v) => {
            return (
              <li>
                {v[0]} - {v[1]}
              </li>
            );
          })}
</ul>

<ul>
          {[
            { fruit: "사과", taste: "맛있다" },
            { fruit: "사과잼", taste: "달다" },
            { fruit: "포도", taste: "맛있다" },
            { fruit: "무화과", taste: "달다" },
            { fruit: "오렌지", taste: "시다" },
          ].map((v) => {
            return (
              <li>
                {v.fruit} - {v.taste}
              </li>
            );
          })}
</ul>

• Props

위 방법은 가독성이 안좋음 → props를 이용해 return 문에서 반복문을 돌림

<ul>
          {[
            { fruit: "사과", taste: "맛있다" },
            { fruit: "사과잼", taste: "달다" },
            { fruit: "포도", taste: "맛있다" },
            { fruit: "무화과", taste: "달다" },
            { fruit: "오렌지", taste: "시다" },
          ].map((v) => {
            return (
              <li key={v.fruit + v.taste}>
                {v.fruit} - {v.taste}
              </li>
            );
          })}
</ul>

key에는 고유한 값을 넣어야함. fruit과 taste를 개별적으로 보면 ‘맛있다’ 부분이 중복되어 고유하지 않지만, {v.fruit + v.taste}는 모두 고유하여 key로 사용할 수 있음

• key가 중복되면 오류 발생
• 화살표 함수는 return 생략 가능

.map((v, i) => {
	return (
		<li key={i}>
			{v.fruit} - {i}
		</li>);}