map활용 컴포넌트 반복하기

html태그 중 ul, li, ol 태그는 목록 데이터를 그려주는 태그입니다. 데이터가 감당할 수 있는 수준에서는 일일이 위의 태그를 직접 활용하여 반영할 수 있겠지만, 데이터가 많아지면 위와 같은 방식으로는 더이상 렌더링하기 쉽지 않습니다.

이때 사용할 수 있는 함수가 map 함수인데, DOM요소, 컴포넌트를 반복하고 싶을 때 map 함수를 이용하여 컴포넌트를 쉽게 렌더링 할 수 있습니다.

예제

const [compareList, setCompareList] = useState(
		[{ id: -1, name: 'none', content : 'none' },
        { id: -2, name: 'none', content : 'none'  },
        { id: -3, name: 'none', content : 'none' },
        { id: -4, name: 'none', content : 'none'  }]);
        
 {compareList.map(compare => (
                <Compare
                  key={compare.id}
                  compare={compare}
                />
              ))}

compareList라는 배열안에 있는 객체들의 데이터를 컴포넌트화하여 반복하고 싶을 때 위와 같이 map 함수를 사용하여 컴포넌트를 반복할 수 있습니다.

compare = {compare}은 compareList에 있는 한 객체의 정보를 모두 props로 보내주고 Compare 컴포넌트에서 구조분해할당을 사용하여 props를 사용할 수 있습니다.

컴포넌트에 key값 넣어주기

map함수를 활용하여 컴포넌트나 DOM을 반복적으로 렌더링할 때, unique한 key가 필요합니다.
즉, 각 요소에 고유의 key값을 넣어줘야합니다.
key값을 사용하는 이유는 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용하는데 예로 데이터를 생성, 수정, 삭제할 때 빠르게 원소의 변화를 빠르게 감지할 수 있기 때문에 사용합니다.

만약 고유의 id값 같이 넘겨줄 만한 값이 없을 때, map의 callback함수의 인수인 index를 활용하여 key값을 넘겨줄 수 있습니다. 하지만 index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다.(배열 요소의 순서가 재배치되면 고유의 값인 key값이 모두 바뀌는 현상도 발생)

정리

• 반복되는 데이터를 렌더링할 때 map 함수를 활용할 수 있습니다.
• 컴포넌트 배열을 렌더링할 때 고유의 값인 key 값 설정에 주의해야합니다.