toDo pt.2 - map( ) 함수

Wonju·2022년 1월 12일
0

map ( )

기존 배열에 함수를 넣어서 새로운 배열을 리턴할 수 있게 한다.

  • 기존 배열 안의 모든 item에 대해 실행된다.
  • 첫 번째 인자는 각 item의 value, 두 번째 인자는 각 item의 index이다.
     <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
     </ul>
  • 콘솔창에 "Warning: Each child in a list should have a unique "key" prop." 라는 문구가 뜰 것이다.
    그 이유는 리액트가 list의 모든 item을 인식하기 때문이다.
    이를 해결하기 위해 index를 활용해준다.

map함수가 적용되는 곳에 key값을 항상 지정해주자.

      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
{movies.map((movie) => (
            <div key={movie.id}>
...
...
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
profile
안녕하세여

0개의 댓글