아래와 같은 리스트 형태의 JSX가 있습니다.
function App() {
return (
<ul>
<li>Jon님의 게시글 입니다.</li>
<li>Jane님의 게시글 입니다.</li>
<li>Mike님의 게시글 입니다.</li>
<li>Kim님의 게시글 입니다.</li>
<li>Lee님의 게시글 입니다.</li>
{/* ... 게시글이 수 많개...*/}
</ul>
)
}
만약 게시글이 수 만개라면 위와 같은 코드를 수 만번 반복해서 작성해야합니다.
다행히도 리액트에서 배열의 map() 함수를 이용하여 리스트를 만들 수 있습니다.
map() 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새 배열을 생성합니다.
아래 코드에서는 리스트를 배열로 생성하여 map() 함수를 통해 JSX 리스트를 생성합니다.
map() 변환 함수( ( el )⇒{ } )의 첫 번째 매개변수( el )로는 각 배열 요소가 순서대로 담깁니다.
function App() {
return (
<ul>
{["Jon", "Jane", "Mike", "Kim", "Lee"].map((el)=>
<li>{el}님의 게시글 입니다.</li>
)}
</ul>
)
}
이렇게 실행 하고 나면 아래와 같은 경고 메세지가 출력될 것 입니다.
이 에러는 각 리스트 아이템에 고유한 key 속성을 부여해야한다는 것입니다.
고유한 key 속성이 필요한 이유는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데 사용하기 위해서 입니다.
아래와 같이 Key를 추가해 주며 더이상 경고 메세지가 출력되지 않습니다.
function App() {
return (
<ul>
{["Jon", "Jane", "Mike", "Kim", "Lee"].map((el)=>
<li key={el}>{el}님의 게시글 입니다.</li>
)}
</ul>
)
}