[25.02.03 월요일]
React 숙련주차 개인과제가 발제됐다...
역시..과제에는 배운내용 +𝛼
그래도 다른 과제를 할 때 보다는 진행이 조금은 수월했다.
이부분을 진행하기 전까진!!
6개의 빈슬롯을 만들고 아래 카드에서 추가 버튼을 누르면 윗쪽으로 카드가 뿅뿅 추가되는 로직을 만들어야 했다.
선택한 카드를 추가시키는 것은 어렵지 않았으나..빈 슬롯을 만든후에 원하는 카드들로 대체하는 부분을 어찌 구현해야 할까...떠오르는 부분이 없었다.
다른 부분들을 먼저 진행후에 고민좀 해볼까? 하며 다른 부분을 진행하는데 담당튜터님이 오셔서 힌트를 던져주고 가셨다!!
'나'님.. 힌트 잘 받은듯!!
"최대갯수가 6개"라는 부분을 염두하고 구현해주세요~ 라고 하셨는데..
리액트 과정에 들어오면서 반복적으로 다루고 있는 부분이 상태관리, 객체, 배열이다.
카드 자료들도 배열이고, 윗쪽 6개의 슬롯도 결국엔 배열이라는 것!
최대 길이가 6개인 배열이고, 6개중에 2개의 카드가 채워지면 4개의 빈 슬롯은 동일한 몬스터볼(?) 포켓볼(?) 이미지로 채워진다.
6개중의 4개의 카드가 채워지면 2개의 빈 슬롯은 포켓볼 이미지로 채워진다.
모든 배열 메서드를 알고있는 것은 아니라서 반복해서 채운다는 기능을 할수 있는 메서드를 찾아봤다.
Array.prototype.fill()
- 인수로 전달 받은 값을 배열의 처음부터 끝까지 요소로 채운다.
- 원본 배열 변경된다.
fill메서드로 요소를 채울 경우 모든 요소를 하나의 값만으로 채울수 밖에 없다.
✅ 예시1 :
const arr = [1, 2, 3];
// 인수로 전달받은 값 0을 배열의 처음부터 끝까지 요소(인수)로 채운다.
arr.fill(0);
// fill 메서드는 원본배열이 변경된다.
console.log(arr); // [0, 0, 0]✅ 예시2 : fill(value, start, end)
const arr = [1, 2, 3, 4, 5];
// 인수로 전달받은 값 0을 배열을 인덱스 1 ~ 3 이전(인덱스3 미포함)까지 요소로 채운다.
arr.fill(0, 1, 3);
// fill 메서드는 원본배열이 변경된다.
console.log(arr); // [1, 0, 0, 4, 5]Array().fill().map()
new Array(6 - selectedPokemon.length)
.fill(null)
.map((_, idx) => {
return (
<li key={idx}>
<img
src="src/assets/pokeball.png"
alt="empty slot"
/>
</li>
);
});new Array(6 - selectedPokemon.length): 길이가 6인 배열을 생성, 선택된(추가된) 포켓몬 배열의 길이만큼 뺀다. ⇒ 빈 슬롯(배열) 개수.fill(null): 빈 슬롯(배열)의 개수만큼 null로 채운다. ⇒ 빈슬롯이 3일 경우[null, null, null].map(()=>{}): 여기서 map은 생성된 배열의null을 기반으로<li></li>생성하고 안에 있는 요소들을 반환한다.
생각보다 어려운데... 생각만큼어렵지는 않았던(?) 부분을 해결했다!!
생각보다 어려웠던 이유는 리액트에 적응하느라 JS를 많이 잊어버렸다.
아직도 적응중이고, 알고리즘 문제풀때도 JS가 잘 생각이 나지 않더라 🫠
새로운것을 배우다보면 이전에 배운것의 기억이 점점 멀어진다...이래서 복습을 해야하는데, 리액트 연습하기도 빠듯한것 같다..🥲
나중에 보니 바로 배열을 생성하여 진행한 팀원도 있었고, const pkemonList = [1, 2, 3, 4, 5, 6] 이런식으로 배열을 만들고 시작한 분도 있었다. 나만 배열을 못떠올렸던건가???
