[프로젝트] 배열에서 count만큼만 렌더링하고 싶을 때

상황

프로젝트를 리팩토링 하던중 고치고 싶은 코드가 있었다.

 

리액트에서 배열을 렌더링하는 코드가 있다.

const arr = [1,2,3,4,5,6,7,8];

return ({
	arr.map((item,index) => {
    		return <컴포넌트 key={index}/>
    	}
})

 

나는 배열을 count 만큼 렌더링을 해주고 싶었다.

기존 코드

그래서 만들어진 코드는 다음과 같다.

const COUNT = 5;
const arr = [1,2,3,4,5,6,7,8];

return ({
	arr.map((item,index) => {
            if(index < COUNT) return <컴포넌트 key={index}/>
        }
})

 

index를 활용하여 COUNT보다 작으면 (0,1,2,3,4) 렌더링을 해줬다.

이 코드로도 원하는 기능은 작동했다.

하지만 COUNT의 값이 좀 더 직관적으로 사용되길 원했다.

COUNT보다 작으면이 아니고 COUNT 만큼! 인건 없을까?

새로운 코드

slice를 사용하여 기존 배열을 COUNT만큼! 잘라줬다.

const COUNT = 5;
const arr = [1,2,3,4,5,6,7,8];
const newArr = arr.slice(0, COUNT);

return ({
	newArr.map((item,index) => <컴포넌트 key={index}/>)
})

나의 생각

사실 이 두 코드는 같은 코드나 다름없다.

다만 ~보다 작다, ~보다 크거나 같다 이런 것 보다는

~만큼 인 코드가 좀 더 이해하기 쉽지 않을까? 하는 생각이 들었다.

리팩토링 할 때는 괜찮은 생각이었던 것 같은데

지금 글을 쓰며 생각해보니 

'~보다 작다, ~보다 크거나 같다' 에 쓰인 조건문이나,

'~만큼' 에 쓰인 slice나

이해하기 위한 난이도 자체는 slice가 더 어렵나? 라는 생각이든다....