1차 플젝을 하면서, 내가 상세페이지를 맡게 되면서
구현하고싶은, 구현해야하는 기능이 한가지 있었다.
뭐야.. 사진 왜케 작아 ㅜ
우리의 상품은 식물이었다. 식물 키우기 난이도를 나타내주는 부분이 있었는데,
난이도별로 채워진 동그라미로 나타내주는 부분이다.
데이터 쪽에서 난이도 값이 East, Normal, Hard 부분으로 날라온다.
처음엔 혼자 state로 동그라미 하나하나에 일일이 다 boolean 값으로 true false 조정하고 있었다. 동그라미마다 배열 인덱스로 접근해서 조건 돌려서 클래스명 바꿔주고 ,,,
노가다로 어찌어찌 하긴 했지만, useEffect 랑 뭐랑 겹치면서 렌더링이 다 밀리는 바람에 원하는 타이밍에 제대로 나오질 않았다 ㅠㅠ
결국 멘토님 도움 요청 🚨
밑에부턴 멘토님 코드이다 👇🏻
// ========== 난이도 dot 기능 구현 ========== //
const difficultyList = {
Easy: 1,
Normal: 2,
Hard: 4,
};
// ========== 난이도 dot 기능 구현 ========== //
<li className="difficulty">
<span>난이도</span>
<DifficultyDot
key={difficultyList.key}
level={difficultyList[difficulty]}
/>
</li>-
백엔드에서 보내주는 difficulty 데이터 값인 Easy, Normal, Hard 값을 객체로 숫자를 할당해주어 사용하기 편하게 만든다.
-
데이터 값이 셋 중에 하나로 날아올 때, 할당된 숫자를 사용하면 된다.
받을 데이터 키값인 difficulty 로 받아 dot 컴포넌트에 props 를 넘겨준다! 변수명은 level. (데이터 받을 때 숫자로 넘어가게 되는 것. Easy 면 1 로 내려준다.)
// DifficultyDot 컴포넌트
import React from 'react';
function DifficultyDot({ level }) {
const newArr = new Array(5).fill(1).fill(0, level, 5);
return (
<div>
{newArr.map((list, i) => {
return (
<span
key={i}
className={`difficultyDot ${
list === 1 ? 'difficultyDotFill' : 'difficultyDotEmpty'
}`}
/>
);
})}
</div>
);
}
export default DifficultyDot;-
컴포넌트에서 level props 를 받아준다. ( dot 하나씩 map을 돌릴거라 dot 동그라미 하나의 컴포넌트를 만들어놓은 상태 )
-
map을 돌려주기 위해 new Array 로 새 배열을 만들어주고, 5로 배열의 length 를 정해준다. (new Array : 새배열을 만들어주는 메서드)
-
fill 메서드를 사용하여 1로 새 배열을 채워준다 -> [1, 1, 1, 1, 1]
-
fill 메서드를 한번 더 사용한다. 파라미터 부분 설명해보자면
fill(채울 요소, 시작인덱스, 끝인덱스)
fill(0, level, 5) -> 0으로 level 숫자 자리부터, 5번째 자리까지 채운다는 말이다. -
level 은 1이나 2 혹은 4일 것이다.
new Array(5).fill(1).fill(0, 2, 5) 가 되는 경우, 1이라는 요소로 5개의 길이를 가진 새 배열에 0이 2번째 자리부터 5번째 자리까지 채워진다는 말이다.
-> [1, 1, 0, 0, 0] -
이 배열 로직을 newArr 이라는 변수명에 담아두었으니, newArr를 map으로 돌릴 것이니 조건을 짠다.
-
map 을 도는 배열 내 요소가 1이거나 1이 아니면, 클래스명으로 다른 dot 을 보여주는 것이다 (css가 다르게 먹혀있는 클래스명)
-
key 값은 인덱스번호로 주었다.
👏🏻 후기
저걸 구현하려고 혼자 80줄이 넘는 내 코드가 아주 단순한 코드로, 가독성 좋은 코드로 바뀌었다 ✨ ㅁㅅ님 그저 빛
