[TIL-015] React Lv3과제 에러 디버깅2

Today목표 : 4/26일 React Lv3과제 에러 디버깅2

---

❗onClick이벤트 위임으로 인해 StOutCon 내부의 StModalCon까지 onClick이 전달되어 모달창 내부 클릭 시에도 모달창이 닫히는 현상 발생 

 

시도한점

어제 해결하지 못했던 이벤트 위임 취소를 오늘 해결했다. 이전에는 이벤트를 전달하는 주체에서 e.stopPropagation()를 사용해야 한다고 생각하여 다음과 같이 외부 컨테이너에서 e.stopPropagation()을 실행했었는데 중단이 되지 않았었다.

<StOutCon
      onClick={(e) => {
        type === "small" && onClick();
        e.stopPropagation();
      }}
    >

 

해결한점, 알게된점

오늘 이 부분을 다음과 같이 이벤트를 전달 받는 주체에서 이벤트 위임을 중단시켰더니 이벤트 위임이 중단되어 문제없이 모달창 내부를 클릭할 경우에는 모달창이 닫히지 않도록 할 수 있었다. 이벤트 위임을 중단시킬 경우, 전달하는 주체가 아닌 전달 받는 주체에서 막아줘야 한다는 것을 깨달았다.

<StModalCon
        width={width}
        height={height}
        onClick={(e) => e.stopPropagation()}
      >

 

 

❗Select options 토글에서 외부 컨테이너가 overflow : hidden일 경우, 토글이 가려지는 부분을 => 보이도록 만들기

 

시도한점

처음에는 select options 토글 구조 자체를 select button > ul > li로 만들어 button에 position: relative를 주고, ul의 width를 부모의 100%, position : absolute를 주어 고정되게 하였다. 하지만 이렇게 만드니 overflow : hidden의 상황에서 ul의 position을 absolute로 주어 부모의 위치를 기준으로 공중에 뜨게 하여 overflow의 영향을 안받게 하려던 내 의도와는 다르게 여전히 overflow의 영향을 받아 토글이 보이는 상황이 발생했다.

      <StToggleButton onClick={toggleChange}>
        <p>{selected}</p>
        <IoIosArrowDown></IoIosArrowDown>
        <StDropDown position={position}>
          {selectToggle && (
            <ul>
              ...
            </ul>
          )}
        </StDropDown>
      </StToggleButton>

 

해결한점, 알게된점

구조를 바꾸어 button과 ul>li를 따로 두고, ul은 container 안에서 button아래에 위치하도록 변경하였다. ul은 자신의 자리에서 그대로 토글대고, position : absolute를 주어 현재 위치에서 공중에 뜨도록 하여 overflow : hidden의 영향을 안받도록 설정했다. 이렇게 하면 ul의 width를 부모의 100%가 아닌 직접 넓이를 설정해야 하지만, button과 ul을 감싸는 컨테이너가 있기 때문에 이 크기를 정하고 둘의 width를 100%로 설정하였다. 이 구조가 relative와 absolute의 예상치 못한 영향을 가장 최소화 하면서 사용할 수 있는 더 좋은 방법인 것 같다.