JavaScript에서 리스트를 변환하는 방식
- map() 함수를 이용하여 numbers 배열의 값을 두 배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) -> number * 2);
console.log(doubled);여러개의 컴포넌트 렌더링하기
element 모음을 만들고 {}를 이용하여 JSX에 포함시킬 수 있다.
JavaScript map 함수를 사용하여 numbers 배열을 반복 실행.
각 항목에 대해 <\li> 엘리먼트를 반환하고 배열의 결과를 listItems에 저장
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
<ul>{listItems}</ul>기본 리스트 컴포넌트
일반적으로 컴포넌트 안에서 리스트를 렌더링한다.
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];
const root = ReactDOM.createRoot(document.getElementId('root'));
root.render(<NumberList numbers={numbers} />);- 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.
key -> 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성
function NumberList(props) {
const numbers = props.numbers;
const listItems numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}Key
React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
element에 안정적인 고유성을 부여하기 위해 배열 내부의 element에 지정해야 한다.
Key를 선택하는 가장 좋은 방법
- 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것
대부분 데이터의 ID를 key로 사용한다.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);렌더링한 element에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 index를 key로 사용할 수 있다.
const todoItems = todos.map((todo) =>
<li key={index}>
{todo.text}
</li>
);- 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다.
- 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다.
key로 컴포넌트 추출하기
key는 주변 배열의 context에서만 의미가 있다.
ListItem 컴포넌트를 추출한 경우 ListItem 안에 있는 li element가 아니라 배열의 엘리먼트가 Key를 가져야 한다.
- 잘못된 사용법 예시
function ListItem(props){
const value = props.value;
return (
// 여기엔 key를 지정할 필요가 없다.
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 여기에 key를 지정해야 한다.
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}- 올바른 사용법
function ListItems(props){
// 여기에는 key를 지정할 필요가 없다.
return <li>{props.value}</li>;
}
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 배열 안에 key를 지정해야 한다.
<ListItems key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
)
};- map 함수 내부에 있는 element에 key를 넣어주는 게 좋다.
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"}
];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);key는 힌트를 제공하나 컴포넌트로 전달하지는 않는다.
컴포넌트에서 Key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달한다.
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);위 예시에서 Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽지 못한다.
JSX에 map() 포함시키기
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return(
<ul>
{listItems}
</ul>
);
}JSX를 사용하면 중괄호 안에 모든 표현식을 포함시킬 수 있으므로 map 함수의 결과를 인라인으로 처리할 수 있다.
function NumberList(props){
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
)}
</ul>
);
}map() 함수가 너무 중첩되면 컴포넌트로 추출하는 것이 좋다.
