[Today I Learned] 1월 4주차 day3

식별된 문제

<CategoryListBtn>을 클릭을 하면 state 값이 false에서 true로 바뀌고,
그로 인해 alert 창을 띄워주지 않는다. 거기에서 onBlur 이벤트를 만들어서 focus가 취소 됐을 시 다시 state값이 true에서 false로 바뀌게 설계 한 코드이다.
결국에는 onClick보다 blur이벤트가 먼저 처리돼서 버그가 발생했다.

해결

왼쪽 마우스 버튼을 누를 시 일어날 수 있는 이벤트는
mouseDown, mouseUp, click으로 세 가지가 있고
blur이벤트까지 포함해 mouseDown -> blur -> mouseUp -> onClick 순서로 일어난다.
즉, onclick 이벤트보다 blur 이벤트가 먼저 trigger 된다.
결국 onMouseDown 이벤트를 줘서 문제를 해결 했다.

{categoryKeword.map((li) => {
            return (
              <CategoryList key={li.id}>
                <CategoryListBtn
                  type="button"
                  onClick={() => {
                    setIsClick(true);
                  }}
                  onBlur={() => {
                    setIsClick(false);
                  }}
                >
                  {li.keyword}
                </CategoryListBtn>
              </CategoryList>
            );
          })}
        </MoodCategoryWrap>
        <MoodPlayDiv>
          <MoodPlayBtn
            type="button"
            onMouseDown={() => {
              handleSubmit();
            }}
          >
            Mood Play
          </MoodPlayBtn>