8월 4일 TIL

firebase를 사용하여 로그인, 회원가입 기능을 구현하려고 하는데 typescript로 작성하려고 한다.
정확히 이 방식으로 작성될 지 모르겠지만 main page에서 로그인 버튼을 누르면 LoginModal.tsx를 띄워줄 것인데 이 때 main page에서 useState로 선언한 setLoginModalOpen를 LoginModal에 props를 내려주려고 하니 계속해서
TS2322: Type 'Dispatch<SetStateAction>' is not assignable to type 'boolean'.
위의 에러가 뜨는 것이다.

const Header = () => {
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  const handleLoginBtnClick = () => {
    setModalOpen(true);
  }

  // const handleSignUpBtnClick = () => {
  // setModalOpen(true);
  // }

  return (
    <>
    {modalOpen && <LoginModal setModalOpen={setModalOpen} />}
      <button onClick={handleLoginBtnClick}>Login</button>
      {/* <button onClick={handleSignUpBtnClick}>Sign Up</button> */}
    </>
  )
} 

두개여서 그런가하고 주석처리를 해봐도.. 똑같은 오류..🥺
typescript를 잘 모르는데 리팩토링이 아니라 처음부터 짜려니까 문제 하나 해결하기가 너무 힘든..상황ㅎ

그런데 나는 props로 내려주는 부분에서 오류가 났기 때문에..어찌됐든 props를 내려주는 Header.tsx를 수정해야 한다고 생각해서 별 짓을 다 했는데.. 해결이 안되었다! 그래서 원래 저 오류를 해결하고 LoginModal.tsx를 추가로 작성하려고 생각 중이였는데 혹시나 하고 LoginModal.tsx를 수정해보았다!

interface LoginModalProps {
  setLoginModalOpen : (loginModalOpen: boolean) => void;
}

const LoginModal = ({setLoginModalOpen}:LoginModalProps) => {
  return (
    <>
      <button></button>
    </>
  )
}

export default LoginModal;

그리고 이렇게 interface로 setLoginModalOpen의 타입을 지정해 주었더니 자연스럽게 해결되어버린 Header.tsx의 오류....‼

뭔가 처음부터 신중하게 곰곰이 생각했으면 이렇게 오래 헤매지는 않았을 수도.. 라는 생각이 들었지만
결과적으로 고쳐서 다행이였다~!

앞으로는 props를 내려주는 쪽에서 오류가 나고 쉽사리 해결이 안된다면 props를 받는 컴포넌트를 수정해보는 방법을 좀 더 빨리 기억할 수 있을 것이다! 아마도!