[React] map 배열 중 일부분만 만들기

React 를 이용하여 map을 돌린 컴포넌트를 만들 던 중, 사용하는 파일에서 부모요소를 구분하기 위해

배열 중 일부분만 map을 돌리고 싶었다.

 

따라서 인덱스인 idx를 받아와서 조건문을 만들었다.  해당 인덱스에 해당할 경우 생성된다.

Props로 해당 조건문의 최소 숫자와 최대 숫자를 받아올 수 있도록 설정했다.

export default function HistoryItem({ minNum, maxNum }) {
  ..
  const { arr } = useArray(9);

  return (
    <>
      {arr.map(
        (item, idx) =>
          minNum <= idx &&
          idx <= maxNum && (
            <li key={idx}>
            	...
            </li>
           )
          );
         }

 

그리고 적용하는 상위 파일에서는 다음과 같이 Props로 해당 조건문을 완성해주는 최소 숫자와 최대 숫자를 전달해주었다. 해당하는 숫자들 사이의 조건문이 true일 경우 랜더링된다. 

<ul>
  <HistoryItem minNum={0} maxNum={2} /> //index 0~2 까지 3개의 컴포넌트가 출력됨
</ul>
<ul>
  <HistoryItem minNum={3} maxNum={4} />
</ul>
<ul>
  <HistoryItem minNum={5} maxNum={6} />
</ul>
<ul>
  <HistoryItem minNum={7} maxNum={8} />
</ul>