0???

상황

12월 12일... 오늘 16시 42분 집현전(도서관 동아리) 사이트 4차 배포가 있다! 마무리 겸 13시부터 모여서 테스트 및 버그 수정을 하고 있다.

그러던 중 재밌는 걸 발견했다ㅋㅋㅋㅋ 아래 화면 왼쪽 하단에 보면 0이 출력된 것이다ㅋㅋㅋㅋ 이게 뭔일인가...?ㅋㅋㅋㅋ 우리 모두 이게 뭔가하며 신기해했다.

개발자 도구를 확인해보니 "0"이 떡하니 들어가 있는 것이다ㅋㅋㅋㅋ

해당 코드를 찾아봤다. 찾아보니 모달 코드가 있었고, 논리 연산자로 모달의 유무 체크를 했다.

</section>
{modal && (
  <Modal isOpen={modal} onCloseModal={closeModal} size="full">
    <ModalHeader onCloseModal={closeModal} isWithCloseButton />
    {modal === USAGE ? (
      <UserUsageInfo key={selectedUser.id} user={selectedUser} />
    ) : (
      <UserDetailInfo user={selectedUser} closeModal={closeModal} />
    )}
  </Modal>
)}

논리 연산자로 체크를 하는데 왼쪽과 오른쪽 모두 flase 일 때, 단순히 모달이 안나오는게 아니라 논리연산자의 결과값 0이 출력되는 것이었다...

후후후 이렇게 재밌는 상황이 생길 줄이야ㅋㅋㅋ

---

해결

다음과 같이 삼항 연산자로 수정했고, 문제를 해결했다!!

</section>
{modal ? (
  <Modal isOpen={modal} onCloseModal={closeModal} size="full">
    <ModalHeader onCloseModal={closeModal} isWithCloseButton />
    {modal === USAGE ? (
      <UserUsageInfo key={selectedUser.id} user={selectedUser} />
    ) : (
      <UserDetailInfo user={selectedUser} closeModal={closeModal} />
    )}
  </Modal>
) : null}