React mission 5
map을 활용한 컴포넌트 렌더링
map 함수를 활용하여 여러개의 컴포넌트를 렌더링할 수 있다.
- 엘리멘트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있다.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
- listItems 배열을
<ul>
엘리먼트 안에 포함하고 DOM에 렌더링한다.
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
이와 같은 방식으로 numbers 배열을 받아서 순서없는 엘리먼트 리스트를 출력하는 컴포넌트를 만들 수 있다.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
위 코드를 실행하면 리스트의 각 항복에 key
를 넣어야 한다는 경고가 표시된다.
Why Key??
- Key는 React가 어떤 항목을 변경, 추가, 또는 삭제할지 식별하는 것을 도와준다.
- Key는 요소에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.
- Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 고유하게 식별할 수 있는 문자열을 사용하는 것. 대부분 데이터의 ID를 Key로 사용
key에 index를 사용하는 것은 권장하지 않는다!
- 향목의 순서가 바뀌거나 항목이 하나 없어져서 index가 바뀔 경우 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다.
- 인덱스를 key로 사용할 경우 부정적인 영향에 대한 설명
- 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본으로 인덱스를 key로 사용
key의 사용
- key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것
- key는 주변 배열의 context에만 의미가 있다.
- ListItem 컴포넌트를 추출 한 경우 ListItem 안에 있는
<li>
엘리먼트가 아니라 배열의<ListItem />
엘리멘트 key를 가져야 한다.
- ListItem 컴포넌트를 추출 한 경우 ListItem 안에 있는
function ListItem(props) {
// 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 맞습니다! 배열 안에 key를 지정해야 합니다.
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
- map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 best!
Author And Source
이 문제에 관하여(React mission 5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@klqwrx7004/React-mission5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)