📆 22.11.13 - React Typescript 를 쓰면서 이전과 달라진 점들. (ex. props)

이전에 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해 줄 때 쉽게 전해주었던 props도, 타입을 정해줘야 될 뿐더러, useState으로 받는 setState 값에는 특별한 타입(?), 제너릭(?) 을 지정해줘야 된다.

useState 값을 props로 자식에게 전달해주기

props로 boolean 타입의 useState 친구들을 내려준다고 생각해보자.

const [isActive, setIsActive] = useState(false);

위와 같이 isActive에 false 라는 값을 주었기에 위의 데이터들의 타입은 boolean이 된다.

이와 같은 값들을 하위 컴포넌트인 Search 로 내려주고 싶어서 원래 하던데로 하게되면 타입에러를 마주치게 될 것이다.

//!! type error !!
<Search isActive={isActive} setIsActive={setIsActive} />

정확한 이유는 잘 모르겠지만, 아마 자식 컴포넌트에서 이들의 타입을 받을 준비가 안되어있기 때문이라고 생각한다. 나는 이미 useState 단계에서 boolean 을 지정하게 해줘서 알아서 인식을 할 것이라고 여겼는데, 그것이 아닌가보다.

그렇다면 이번엔 props를 받을 자식 컴포넌트에서 interface로 무슨 type이 지정될 것인지 설정해 보려고 한다.

interface isProps {
  isActive: boolean;
  // type error!
  setIsActive: boolean
}

isActive가 boolean 값이라는 것도 알고 setIsActive도 결국 boolean의 형태를 띄울 것이라고 생각했기에 이리 지정을 하고 props를 사용하려했는데 타입에러가 발생하였다.

전지전능한 Stackoverflow에서 이르길, setIsActive 같은 setState들은 특별한 타입? 제너릭? 을 사용해야 한다고 한다..! 바로 아래와 같이

interface isProps {
  isActive: boolean;
  setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
}

이렇게 하고 사용할 함수형 컴포넌트에서 isProps의 타입값으로 호출하니 잘 작동이 된다.

function Search({ isActive, setIsActive }: isProps) {
  /* SearchModal 작동 boolean */
  const ModalHandler = () => {
    setIsActive(!isActive);
  };