[Pokemon PJ_Day 2] 조건부 스타일링, Array.from, 이벤트 버블링 방지

'리액트 숙련주차 과제 : 포켓몬 도감 만들기' 진행 중 해결한 트러블 슈팅

---

조건부 스타일링(삼항 연산자)

 

(상단 부분을 대시보드(dashboard), 하단부분을 리스트(List)로 지칭하겠다.)

대시보드와 리스트에 나타나는 카드 로직은 동일하게 작성되므로 버튼 부분만 바꿔야 한다.

 

?

if문을 사용해야 하나? 같은 카드 로직을 다른 배열(리스트는 전체 데이터 배열, 대시보드는 클릭한 데이터 배열)로 mapping 해야하나?

버튼 조건을 어떻게 작성하고 적용해야 하는지 헷갈렸다.

 

 

📍삼항연산자를 이용한 조건부 스타일링

튜터님의 설명을 참고하여 조건부 스타일링을 적용하였다.

삼항연산자를 사용해서 다음과 같이 구현한다.

(버튼 조건) ? (추가 버튼) : (삭제 버튼)

버튼 조건이 참일 시 추가버튼, 거짓일 시 삭제 버튼이기 때문에

리스트에 있을 때를 참, 대시보드에 있을 때를 거짓으로 지정하였다.

 

[PokemonList 파일]

// PokemonList.jsx

{MOCK_DATA.map((data) => {
          return (
            <PokemonCard
              key={data.id}
              addMypokeMon={addMypokeMon}
              deleteMypokeMon={deleteMypokeMon}
              isAdd={true} // 리스트에 있을 때 참
              data={data}
            />
          );
        })}

 

[Dashboard 파일]

// Dashboard.jsx

{myMon.slice(0, 6).map((mon, index) => {
          return (
            <PokemonCard
              key={index}
              data={mon}
              isAdd={false} // 대시보드에 있을 때 거짓
            />
          );
        })}

 

[PokemonCard 파일]

// PokemonCard.jsx

{isAdd === true ? (
        <AddBtn
          className="add-card-btn"
          onClick={() => {
            addMypokeMon(data.id);
          }}
        >
          추가
        </AddBtn>
      ) : (
        <DeleteBtn
          className="remove-card-btn"
          onClick={() => {
            deleteMypokeMon(data.id);
          }}
        >
          삭제
        </DeleteBtn>
      )}

 

 

 

Array.from

 

Dashboard에 선택하지 않은 부분에 6개의 빈 포켓몬 볼을 두고, 카드가 추가될 때마다 하나씩 채워지는 형태를 구현해야 한다.

 

처음에는 css를 위해 하드코딩으로 이미지 6개를 넣었지만,

이전 경험을 바탕으로 한 개의 이미지 파일을 map 해야 한다는 생각이 들었다.

 

하지만 막상 코드로 옮기려니 아래와 같은 의문으로 머리 속이 가득했다.

[List 에서 클릭된 카드(filterMon)를 PockmonCard로 출력하여 BallSt 대체하기]
?? filterMon은 배열. PokemonCard와 별개로 카드 만들기..?
?? PokemonCard를 어떻게 dash에 출력?
?? 출력한 후 BallSt를 대체하기

 

이 중 마지막 의문이었던 BallSt(빈 포켓몬 볼)을 대체하는 방법에 대해 정리하겠다.

바로 Array.from을 사용하는 것이다.

 

 

📍Array.from

Array.from은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드이다.

(※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미한다.)

// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("Hello"));
// [ 'H', 'e', 'l', 'l', 'o' ]

// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));
// [ '찬민', '희진', '태인' ]

// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const funcA = (...arguments) => {
    return Array.from(arguments)
}

console.log(funcA(1,2,3,4,5));
// [ 1, 2, 3, 4, 5 ]

 

첫 번째 인자는 배열로 만들 이터러블한 객체가 되며,

두 번째 인자는 생성한 배열의 모든 원소에 대해 수행할 맵핑 함수이다. (콜백함수를 전달하면 마치 map 메소드와 같은 동작을 한다.)

 

 

적용한 로직은 다음과 같다.

// 6-(myMon 개수)
  const emptyCards = 6 - myMon.length;

{Array.from({ length: emptyCards }).map((_, index) => (
          <BallSt
            key={index}
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/800px-Pokebola-pokeball-png-0.png"
          />
        ))}
      </Balls>
    </Header>
  );
};

 

코드 해석

• {Array.from({ length: emptyCards }) :  length만큼 요소가 undefined인 빈 배열을 생성한다.
• .map((_, index) => (html 요소) : Array.from을 통해 반환된 배열의 index(요소 개수)만큼 html 요소를 map한 배열로 반환한다.

 

 

Array.from을 통해 빈 배열을 생성했기 때문에 이와 같이 클릭한 카드의 부분이 사라지는 것이 아닌,

뒤 쪽부터 빈 포켓몬 볼이 나타나는 것을 구현할 수 있다.

 

 

이벤트 버블링 방지

 

모든 카드는 버튼을 제외한 부분을 클릭하면 Detail 페이지로 넘어가는 기능을 구현해야 한다.

이전 영화 페이지 과제에는 'closest'를 활용하여 부모 요소의 class를 따라 갔지만, 

이번에는 onClick 이벤트를 카드 전체에 주어야 했다. (Detail로 넘어가는 것은 navigate를 사용하여 설명 생략)

 

여기서 문제가 되는 것이 '이벤트 버블링'인데 다른 곳까지 클릭 이벤트가 퍼지지 않도록 카드 내에서만 한정지어야 했다.

 

사실 나는 그전까지 이벤트 버블링이란, 클릭을 통해 작동되는 기능이 다른 요소로 퍼지는 것으로 생각했었다.

하지만 '클릭' 자체에 대한 동작이 다른 곳까지 퍼지는 것을 의미한다는 걸 이번 기회에 알게 되었다.

 

이벤트 버블링 방지로 대표적인(?) 방법은 event.stopPropagation()이 있다. 말 그대로 propagation(전파)를 stop하는 것이다.

하지만 이 방식은 추후에 로직이 길어졌을 때 이벤트가 어디에서 중단되었는지 정확히 알기가 어려워진다고 한다.

 

따라서 나는 다음과 같은 방식을 사용했다.

onClick={(e) => {
        if (
          e.target.classList.contains("add-card-btn") ||
          e.target.classList.contains("remove-card-btn")
        ) {
          return;
        }


<AddBtn className="add-card-btn">추가</AddBtn>
<DeleteBtn className="remove-card-btn">삭제</DeleteBtn>

 

코드 해석

• e.target.classList : onClick 이벤트에서 className을 인식
• contains : className을 갖고있으면
• return : 클릭이벤트를 early return 한다.