리액트 React | 리스트

 

✅ 리스트

💡 JavaScript 리스트

https://vietnamlife.info/

JavaScript에서 배열을 다루는 기능 중 map() 함수를 활용하여 리스트를 변환할 수 있습니다. map() 함수는 각 배열 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.

---

map() 함수는 배열의 각 요소를 인자로 받아 해당 요소를 가공한 후 새로운 배열을 반환합니다. 예를 들어, 주어진 배열의 각 요소를 두 배로 만들고 싶다면 다음과 같이 작성할 수 있습니다. numbers 배열의 각 요소를 두 배로 만들어 새로운 배열을 생성하고, 그 결과를 doubled 변수에 할당하여 출력하였습니다. 

 

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

 

💡 React 리스트

React에서는 JSX 문법을 사용하여 동적으로 리스트를 생성할 수 있습니다. map() 함수를 사용하여 배열을 반복 실행하고, 각 항목에 대해 JSX 엘리먼트를 반환합니다. 이후 엘리먼트 배열을 JSX에 중괄호를 이용하여 포함시킬 수 있습니다.

---

numbers 배열의 각 요소를 <li> 엘리먼트로 만들어 엘리먼트 배열을 생성하고, 그 결과를 <ul> 엘리먼트 안에 중괄호를 이용하여 포함시켰습니다. 이렇게 생성된 리스트 엘리먼트는 React 컴포넌트의 일부로 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

<ul>{listItems}</ul>

 

💡 기본 리스트 컴포넌트

React에서는 주로 컴포넌트를 이용하여 리스트를 렌더링 합니다.

---

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>;
}

---

numbers.map() 함수 안에서는 각 항목에 key를 할당하여 키 누락 문제를 해결하였습니다. numbers.map() 함수 안에서 각 항목에 key를 할당하고, 해당 숫자를 문자열로 변환하여 사용하였습니다.

 

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
  return <ul>{listItems}</ul>;
}