배열 등을 이용하여 반복적인 컴포넌트 랜더링

<aside> 💡 map 반복 문법 arr.map(callback); → callback 함수의 파라미터로 전달 된 배열 내 각 요소를 원하는 규칙에 따라 변환 후 그 결과로 새로운 배열을 반환

</aside>

map 문법을 사용하여 콜백 함수로 전달되는 파라미터는 3가지를 가질 수 있음

1. currentValue : 현재 처리하고 있는 요소
2. index : 현재 처리하고 있는 요소의 index값
3. array : 현재 처리하고 있는 원본 배열

const numbers = [1, 2, 3, 4, 5];
const results = numbers.map(num => num * num);
// [1, 4, 9 ,16, 25]

const fruit = ['사과', '바나나', '수박'];
fruit.map((currentValue, index, array) => {
    console.log(currentValue);  // 현재 반복 처리하고 있는 요소 출력
    console.log(index); // 반복하는 인덱스 번호 출력
    console.log(array); // [사과, 바나나, 수박] 원본 배열 출력
})

map 문법을 사용하여 props 객체의 배열을 map으로 활용하여 렌더링이 가능함

function Items({names}) {
    return (
        <ul>   
            {names.map((name, index) => <li key={index}>{name}</li>)}
        </ul>
    );
}

const names = ['홍길동', '유관순', '윤봉길', '이순신', '임꺽정'];
ReactDOM.createRoot(document.getElementById('root')).render(<Items names={names}/>);

→ 해당 예시와 같이 반복되는 요소에는 key값을 부여해 주는 것이 좋다.

key란?

리액트에서 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있는지를 알아내기 위해 사용하는 식별자 역할

key가 존재하지 않을 때는 가상DOM이 실제DOM과 비교하는 Diffing 과정에서 리스트를 순차적으로 다 비교해 가며 변화를 감지함.

key가 존재한다면 이 값을 가지고 어떤 변화가 일어났는지 더 빨리 감지 가능함