[TypeScript] props로 setState 넘겨주는 방법

react.js를 사용하면서 아래왜 같은 경우가 굉장히 다분하게 있을 것이다.

부모 컴포넌트에서 만든 state를 변경하는 setState를 자식 컴포넌트로 내려서 사용하는 것

 

이런 경우가 굉장히 많기에, 우리는 react.js에서 이렇게 사용해왔다.

 

// Parents.js

const Parents = () => {
  const [state, setState] = useState("");
  return <Child setState={setState} />;
};

// Child.js

const Child = ({setState}) => {
  return <button onClick={()=>{setState("1")}}>클릭</button>;
};

 

react.js에서는 편-안하게 props로 넘겨주고 사용해서 부모에 있는 state를 변경할 수 있었다.

그런데.. Typescript에서는 그렇지 않았다..

 

 

Problem

---

const Nav = () => {
  const [selectBtn, setSelectBtn] = useState('');

  return (
    <nav className={css.nav}>
      {BUTTON_LIST.map(list => {
        return (
          <Logo
            key={list.id}
            title={list.title}
            selectBtn={selectBtn}
            setSelectBtn={setSelectBtn}
          />
        );
      })}
    </nav>
  );
};

 

내가 하고자 했던 부분은 이거다.

Nav 컴포넌트에서 여러 로고가 있고, 해당 로고를 클릭 했을 때 selectBtn 이라는 state에 어떤 로고를 눌렀는지 저장한다.

해당 로고 이름과 각 Logo 컴포넌트의 title 값이 일치 했을 때, 해당 Logo의 border를 변경하고자 하는 로직을 구현하려 했다.

 

interface Props {
  title: string;
  selectBtn: string;
  setSelectBtn: () => void;
}

 

props를 전달 받는 Logo 컴포넌트에서는 Typescript를 사용하기에 넘겨 받은 props의 데이터의 타입을 지정해 주었다.

내가 생각하기에 setSelectBtn은 함수니까 이렇게 지정해주면 되겠지! 하고 넘어갔는데..

 

 

너무도 친절하게 바로 에러를 뱉어 주셨다.. (퉤)

해당 에러를 해결하기 위해 다시 갓 구글 선생님을 찾았다.

 

 

Solution

---

interface Props {
  title: string;
  selectBtn: string;
  setSelectBtn: Dispatch<SetStateAction<string>>;
}

 

이번에도 해결 방법은 간단했다.

() => void 대신 Dispatch<SetStateAction<string>>를 사용하는 방법으로 구현할 수 있었다.

 

그냥 저 텍스트를 쓰면 안되고 import로 Dispatch, SetStateAction을 불러온 뒤 사용해야 하는데,

왜 이 방법을 사용해야 하는지는 추가적으로 공부하고 알아봐야 하는 부분일 것 같다.

 

 

++

 

그래서 찾아봤는데 setState의 마우스 커서를 올려보니 위의 사진처럼 해당 setState의 타입을 보여주고 있었다.

다른 블로그 글과 스택오버플로우도 봤는데, setState의 type을 정해줄 때, 이렇게 하라라는 말이 대부분이었다.

react에서 정한 타입이니 그대로 따르는 게 좋지 않을까..?ㅎㅎ

 

 

참고자료

---

 

TS - setState 갱신함수 props로 전달하기

 

 

How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?