React의 목록과 키는 무엇입니까?

JavaScript에서 원래 배열의 각 요소를 변환하여 새 배열의 해당 요소를 생성하여 사용 가능한 배열에서 새 배열을 생성하려는 경우 map() 메서드를 사용할 수 있습니다.

키는 React가 목록의 항목을 구별하는 데 도움이 됩니다. React가 변경된 항목, 추가된 새 항목 또는 목록에서 제거된 항목을 관리하는 데 도움이 됩니다.


목록 JavaScript 배열과 map() 함수를 출력할 수 있습니다. map()은 배열을 순회하는 데 사용됩니다. 숫자 배열을 허용하고 요소 목록을 출력하는 기본 목록 구성 요소 아래.

function Numberlist (props) {
    const numbers = props.numbers; 

    const listItems = numbers.map((number) => 
       <li key={number.toString()}>{ number }</li>
     ); //listItems becomes a list of numbers (or an array of 5 <li> tags)
     return (
     <ul>{ listItems }</ul>
     ); 

}

const numbers = [1, 2, 3, 4, 5]; 
ReactDOM.render(
     <NumberList numbers={numbers} />, 
     document.getElementById('root')
); 

키는 마지막 슬라이드에서도 보았듯이 요소 목록을 만들 때 포함해야 하는 특수 문자열 속성입니다. 키는 React가 변경 사항이 있거나 추가되거나 제거된 항목을 식별하는 데 도움이 됩니다. 키는 요소에 안정적인 ID를 부여해야 합니다.

안정적인 ID나 렌더링된 항목의 키로 사용할 적절한 속성이 없는 경우 최후의 수단으로 항목 인덱스를 키로 사용할 수 있습니다.

const todoItems = todos.map((todo, index) => 
     <li key={index}>
       { todo.text }
     </li>
); 

📘 읽어주셔서 감사합니다 | 행복한 코딩 ⚡