React 내에서의 List
- 기본적으로 React 내에서의 배열을 엘리먼트 리스트로 만드는 방식은 아래와 같다.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
- 아래와 같이 map() 을 이용한 방식으로 배열을 반복실행.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
- 아래와 같이 props로 number 배열을 전달받아 사용할 수도 있다.
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
- Key는 엘리먼트 리스트를 만들 때 반드시 포함해야 하는 문자열 어트리뷰트이며, 각 엘리먼트에 안정적인 고유성을 부여한다.
- Key는 React 컴포넌트 사이에서 전달받는 값이며, li 등의 하위의 자식요소로 전달하지 않는다!!!
- Key는 형제 사이에서 반드시 고유한 값으로 지정되어야 한다. 전체범위 내에서는 고유하지 않아도 된다.
- Key는 React가 어떤 항목을 변경/추가/삭제할지 식별하는 것을 돕는다.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
- 대부분의 경우에는 데이터의 ID를 Key로 사용한다.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
- 데이터의 ID 등이 존재하지 않는 경우에 각 요소의 index를 Key로 사용하기도 하나, 각 요소의 순서가 변경될 수 있는 경우에는 권장하지 않는다. 성능의 저하 혹은 컴포넌트의 state와 관련된 문제가 발생될 수 있다. 또한 Key를 별도로 명시하지 않았다면, React는 기본적으로 index를 Key로 사용한다.
const todoItems = todos.map((todo, index) =>
<li key={index}>
{todo.text}
</li>
);
- 아래의 코드는 Key를 언제, 어떻게 사용해야하는지 도움이 될 코드이므로 꼭 읽어보자. 일반적으로 map() 내부의 엘리먼트에 key가 사용된다.
function ListItem(props) {
const value = props.value;
return (
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<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')
);
const StudyFetch = () => {
const [data, setData] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json"
)
.then(function (response) {
return response.json();
})
.then(function (myJson) {
let result = myJson.data.people;
result.map((person, index) => {
person.id = index;
});
setData(result);
})
.catch((error) => {
setError(`ERROR!! :: ${error.message}`);
});
}, []);
if (error != null) {
return <p>{error}</p>;
}
if (data == null) {
return <p>Loding ....</p>;
}
const Persons = (props) => {
return (
<li>
name : {props.name} <br />
age: {props.age} <br />
id : {props.id} <br />
</li>
);
};
const myPersonList = data.map((person) => (
<Persons key={person.id} name={person.name} age={person.age} />
));
const todos = [
{ id: 1, inner: "work1" },
{ id: 2, inner: "work2" },
{ id: 3, inner: "work3" },
{ id: 4, inner: "work4" },
];
const Items = (props) => {
return <li>{props.inner}</li>;
};
const todoList = todos.map((todo) => <Items key={todo.id} {...todo} />);
return (
<div>
<br />
<br />
<p>People</p>
<ol>{todoList}</ol>
<ol>{myPersonList}</ol>
</div>
);
};
export default StudyFetch;