[React] React에서 반복문 사용하기: map()

React 내에서도 리스트 형태의 데이터를 출력할 때 반복문을 사용하게 된다.

Java와 같은 언어들은 대부분 for문을 사용하면 되지만 React는 그보다 map을 더 많이 사용한다.

map의 사용법을 알아보자.

 

1. 기본 형태

map은 배열 내장 메소드이기 때문에 배열.map(콜백함수) 형태로 사용된다.

arr.map(callbackFunction, [thisArg])

arr.map(callbackFunction(currentValue, index, array), thisArg)

 

• currentValue : 현재 배열(arr) 내의 값들
• index : 현재 배열 내 값의 인덱스
• array : 현재 배열
• thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스를 설정

2. map 사용

function ListSample({tagList}) {
    return(
        <div>
            <h2>데이터 출력, 까짓거 해봅시다.</h2>
            <div>
                {tagList.map((tag, index) => {
                    return(
                        <div key={index}>
                            <div>
                                <span>Index: {index}</span>
                            </div>
                            <div>
                                <span>목록번호: {tag.listNum}</span>
                            </div>
                            <div>
                                <span>태그 id: {tag.tagId}</span>
                            </div>
                            <div>
                                <span>태그 seq: {tag.TagSeq}</span>
                            </div>
                            <br/>
                        </div>
                    );
                })}
            </div>
        </div>
    )
};
export default ListSample;

tagList는 상위 부모 컴포넌트에게 전달 받은 값이다.

배열인 tagList를 반복문을 돌릴 때 데이터 하나를 지칭하는 변수를 tag로 설정하였다.

그리고 그에 대한 index 값을 지정하도록 설정하였다.

 

map을 사용할 때 주의해야 할 점은 key 값이 있어야 한다는 점이다.

key 값을 작성하지 않는다고 심각한 error가 발생하는 것은 아니지만 unique한 값이 없다는 error가 발생한다.

Each child in a list should have a unique "key" prop.

key는 React에서 컴포넌트를 렌더링을 하였을 때 어떤 요소가 변경되었는지 빠르게 감지하기 위해 사용한다.(변경, 추가, 삭제 등) 하지만, key가 설정되어 있지 않으면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 속도가 느려진다.

 

단, 기본적인 설명을 위해 index 요소를 넣었지만 key 값으로 index를 사용하는 것은 권장하지 않는다.

삭제되거나 순서가 변경되지 않은 상황에서는 문제가 되지 않지만, 순서가 변경되는 경우 성능 문제나 컴포넌트 문제가 발생할 수 있다.

그러므로 데이터가 가지고 있는 유니크한 key를 사용하는 것이 좋다.(여기서는 태그가 찍힐 때마다 추가되는 목록번호, tag.listNum을 사용하는 것을 더 권장한다.)

 

3. 응용

위의 기본형태를 응용하면 배열의 데이터를 표로 표현할 수 있다.

 

---

[ 참조 ]

https://velog.io/@reasonz/2022.07.04-리액트-JSX-반복문

https://goddaehee.tistory.com/303