[TS] useState props 전달 할 때 타입 지정하는 방법, TypeScript 코드 예시

안녕하세요. 이번 포스팅에서는 useState를 사용해 선언한 변수를 props를 통해 전달 할 때, 타입지정하는 방법에 대해 알아봅시다.

 

아래 예시코드를 통해, 타입지정 방법을 확인해보세요.

// App.tsx

function App() {
  const [aboutScroll, setAboutScroll] = useState(false);
  return (
    <Layout>
      <About aboutScroll={aboutScroll} setAboutScroll={setAboutScroll} />
    </Layout>
  );
}

export default App;

// About.tsx

interface AboutProps {
  setAboutScroll: Dispatch<SetStateAction<boolean>>;
  aboutScroll: boolean;
}

const About: React.FunctionComponent<AboutProps> = ({ aboutScroll, setAboutScroll }) => {
  return (
    <></>
  );
};

export default About;