[React] 리스트와 Key
아래는 map()함수를 이용하여 numbers 배열의 값을 두 배로 만들어 반환하는 배열을 doubled 변수에 할당하고 로그를 확인해보겠습니다.
let numbers = [1,2,3,4,5];
let doubled = numbers.map((numbers) => numbers * 2);
console.log(doubled);
React에서 배열을 엘리먼트 리스트로 만드는 방식은 거의 동일합니다.
여러개의 컴포넌트 렌더링 하기
엘리먼트 모음을 중괄호 {} 를 통해 JSX에 포함 시킬 수 있습니다.
numbers 배열을 반복 실행합니다. 각 항모에 대해 <li>
엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다.
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')
);
NumberList function에 props를 numbers로 받아 render 할 수 있습니다.
위 코드를 실행할 경우 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Key
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 ID를 Key로 사용합니다.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
사용할 ID가 없을 때 index를 Key로 사용할 수 있지만 권장하지 않습니다. index를 사용할 경우 성능 저하, state와 관련된 문제가 발생할 수 있습니다.
리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용하기 때문입니다.
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')
);
Key는 형제 사이에서만 고유한 값이어야 합니다.
Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서는 고유할 필요가 없습니다. 두 개의 다른 배열을 만들 때 동일한 Key를 사용할 수 있습니다.
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
React에서 Key는 힌트를 제공하지만 컴포넌트로 전달하지는 않습니다. 컴포넌트에서 Key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달합니다.
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
위와 같이 key값에 {post.id}가 있고, id에 {post.id}가 있어도 문제가 없습니다.
Author And Source
이 문제에 관하여([React] 리스트와 Key), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/React5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)