and(&&) 연산자와 삼항 연산자

회사에서 코드를 고쳐보던 중에

<FaExpandArrowsAlt
  size={18}
  className="expand-arrow-alt"
  role="button"
  onClick={!loading ? handleModalOpen : handleModalClose}
/>

Warning: Expected `onClick`listener to be a function, instead got`false`. If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.

라는 오류를 보게 되었다.

말 그대로 && 대신에 삼항 연산자를 이용하라는 소리인데, 분명 제대로 고쳤음에도 오류가 없어지지 않았다. 알고 보니 다른 위치에 &&가 존재했었고 다시 삼항 연산자로 바꾸니 오류가 없어졌다.

위에 있는 문장을 더 해석해 보면 onClick listener는 함수를 받기를 기대했지만 false를 받았다고 말하고있다.

그렇다면 이 오류는 왜 뜨는 것인지 알아보기로 했다.

onClick={!loading && handleModalOpen}

처음 코드는 loading이 false이고 handleModalOpen이 함수일때만 onClick 핸들러가 발동이 된다.

하지만 loading이 true면 onClick 핸들러에는 false가 전달된다.

하지만 handleModalOpen 함수를 확인해봤을 때, () => void를 리턴한다고 나와있기 때문에 오류를 내뱉게 되는 것이다.

이전에는 &&를 쓰나 삼항 연산자를 쓰나 오류를 못 봤던 것 같은데, 대체 뭔 차이가 있는거지? 싶었지만 회사에서 작업을 하다보니 여러 블로그에서도 삼항 연산자를 쓰는 것이 버그를 줄이는 길이라고 말하는 게 이해가 되기 시작한다.

그래서 어제도 TypeScript로 마이그레이션 할려고 하는데, 점진적으로 진행할려고 했으나.... 한 파일과 다른 여러 파일이 연관이 되어있다 보니 그 다른 파일들도 다 고쳐야 하고 이래저래 할 일이 많아지는 것 같아서 그냥 새로운 프로젝트 할 때 아예 TypeScript로 시작해 볼까 한다.