TIL 220928 input 체크박스를 클릭하면 onClick이벤트가 2번 발생하는 이유 + etc.

input 체크박스를 클릭하면 onClick이벤트가 2번 발생하는 이유 

 

input checkbox를 커스텀해서 체크박스를 구현했다.

커스텀 체크박스 구현

체크박스를 선택하면 해당 체크박스에 해당하는 쿼리스트링이 쿼리스트링을 관리하는 배열에 들어가는데 한 번 클릭했는데 2번씩 들어갔다. React.StrictMode 때문인가 싶어서 없애고 클릭해봐도 계속해서 2번 들어갔다.

...
    <List onClick={getOptions}>
      <input
        id={text}
        name={text}
        type='checkbox'
        checked={checked.filter((el) => el.name === text)[0].checked}
        readOnly
      />
      <span className='checkbox' onClick={handleCheck}>
        <FontAwesomeIcon icon={faCheck} className='check' />
      </span>
      <label htmlFor={text} onClick={handleCheck}>
        {text}
      </label>
    </List>
    ...

대략적인 구조는 이렇게 되는데 자꾸 onClick 이벤트가 2번 발생했다. 검색을 해봐도 strict 모드를 때문이다라고 나와서 결국 영어로 검색하다가 왜 그런지 이유를 찾았다. 영어를 못해도 영어 검색을 생활화하자...🥲

label태그와 input태그는 연결되어있어서 label태그를 클릭하면 클릭이 2번 발생하는 html 자체의 문제였다. 그래서 2번 발생하는 이벤트를 막기 위해서 e.preventDefault()로 막아줬더니 정상적으로 1번만 들어갔다.

 

참고

---

빈 객체 확인하기

const obj = {};
Object.keys(obj).length === 0

 

 

Date객체 복사하기

const date = new Date();
const copiedDate = new Date(date.getTime());

---

투명도가 있는 hex코드 사용하기

hex는 투명도를 줄 수 없는 줄 알았는데 자릿수를 늘리면 투명도를 가진 채로 사용할 수 있다.

#00000099;

변환해주는 사이트

 

---

scrollTo 속도 조절

스크롤 탑버튼을 구현할 때 scrollTo를 사용했는데 속도가 조금 더 빨랐으면 좋겠어서 찾아봤는데 속도 조절은 불가능하다고 한다. 짧은 페이지는 느리게 올라오지만 긴 페이지는 좀 빨리 올라오는 것 같아서 위안을 삼기로 했다. 하지만 나중에 메소드에 속도 조절 속성도 추가해줬으면 좋겠다.

  const handleScrollTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

---

객체를 props로 넘겨줬을 때 구조분해할당

// 부모 컴포넌트
...
const obj = {
  id: 1,
  greeting: hi
}

...

<Sample obj={obj} />

// 자식 컴포넌트

const Sample = ({obj}) => {
return <h1>{greeting}</h1>
}

이렇게 객체를 통째로 props로 넘겨주고 소괄호 안에서 구조 분해 할당을 했다. 이렇게 이용하려고 하는데 자꾸 안돼서 생각을 해보니 객체를 통째로 넘겨줬으면 구조분해할당을 해도 한번 더 해야 되는데 착각해서 한참 동안 시간을 썼다. 사람이 졸리면 멀쩡한 사고가 불가능하니 그럴 땐 억지 부리지 말고 자야 한다는 걸 느꼈다...🥲

// 자식 컴포넌트

const Sample = ({obj}) => {
return <h1>{obj.greeting}</h1>
}
// or
const Sample = ({obj}) => {
const {id, greeting} = obj;
return <h1>{greeting}</h1>
}