엘리먼트 집합을 만들고 중괄호를 통해 JSX에 포함시킬 수 있다.
const UnorderedList = () => {
const dummyList = [1, 2, 3, 4, 5]
const listItems = dummyList.map((item) =>
<li>{item}</li>
);
return (
<ul>{listItems}</ul>
);
}
이 코드는 리스트를 렌더링하지만 콘솔에 key에 관한 경고를 출력한다.
const UnorderedList = () => {
const dummyList = [1, 2, 3, 4, 5]
const listItems = dummyList.map((item) =>
<li key={item.toString()}>{item}</li>
);
return (
<ul>{listItems}</ul>
);
}
li 요소에 key를 할당하여 이를 해결할 수 있다.
Key는 React가 항목을 식별할 수 있도록 돕는다. 따라서 배열 내부의 엘리먼트에 key를 지정하여 고유성을 부여해야 한다.
데이터의 ID를 사용하거나 고유하게 식별할 수 있는 문자열 등을 사용하는 것이 좋다.
키는 주변 배열의 context에서만 의미가 있다. 따라서 배열 안에 key를 지정해야 한다.
key는 배열 안에서만 고유하면 되고 전역에서 고유할 필요는 없다.
key는 힌트만 제공할 뿐 컴포넌트로 전달하지 않는다. 따라서 key와 동일한 값을 전달하려는 경우 다른 이름의 prop을 통해 명시적으로 전달해야 한다.
JSX에서 중괄호 안에 모든 표현식을 포함시킬 수 있다. map() 함수도 마찬가지이다.
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
다만 가독성을 위해 변수로 추출할지 인라인으로 넣을지 직접 판단해야한다.
안녕하세요 sunkeydokey님, 잘 보고 있습니다 :)
다만 현재 포스팅은 List 와 Key의 내용인데, 바로 뒤 포스트인 조건부렌더링과 내용이 같아서 확인차 댓글 남깁니다!
프론트엔드 개발자로써의 꿈 응원합니다. 감사합니당!