[JavaScript] 입력한 숫자에 따라 배열을 생성하는 함수 만들기

React 코드를 작성 중,

배열을 [1,2,3] 처럼 먼저 만들어 놓고 map을 돌리는 것은 비효율적이라고 생각이 되었다.

14개를 만들때 하나하나 다 입력하고, 나중에 숫자가 더 커진다면 ?😵

그래서 처음 빈 배열을 담은 변수를 생성한 후, 입력한 숫자에 따라 배열을 만들어 내도록 하였다.

 

아래 코드에서 arrayLists 에 14를 매개변수를 넣는다면 입력한 숫자만큼 배열이 생겨난다.

let arr = [];
  const arrayLists = (n) => {
    for (var i = 0; i < n; i++) {
      arr.push(...[i]);
    }

    console.log(arr);
  };

  //매개변수 숫자만큼 배열 생성
  arrayLists(14);

 

▼ 콘솔창 출력화면

 

그리고 arr.map 을 통해 반복되는 태그를 축약하여 코드를 사용하였다. 👍

---

위 코드 커스텀 Hooks으로 만들기

 

이후 다른 파일에서도 적용하기 위해 

커스텀 Hooks 으로 만들었다.

export default function useArray(n) {
  let arr = [];

  for (var i = 0; i < n; i++) {
    arr.push(...[i]);
  }

  return {
    arr //적용 파일에서 꺼내 쓰도록 return
  }
}

 

커스텀 Hooks 사용 예시

import useArray from '@hooks/useArray';

export default function PartnersLists() {
  
  const { arr } = useArray(14);
  
  return(
  	<>
    	{
            arr.map((item,idx)=>(
            ...
            ))
         }
    </>
  );
  }