240626 TIL

타입스크립트로 리액트 훅 사용하기

타입스크립트와 리액트를 함께 사용하면, 코드의 가독성과 유지보수성이 향상됩니다. 오늘은 타입스크립트로 리액트 훅을 사용하는 방법에 대해 배워보았습니다.

1. 기본 설정

리액트와 타입스크립트를 함께 사용하려면 react, react-dom, typescript, @types/react, @types/react-dom 패키지를 설치해야 합니다.

2. useState 훅

useState 훅을 사용할 때는 상태의 타입을 명시해야 합니다.

import React, { useState } from 'react';

const Counter: React.FC = () => {
  // number 타입을 명시합니다.
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

3. useEffect 훅

useEffect 훅은 타입스크립트와 함께 사용하기 매우 간단합니다. 보통 추가적인 타입 명시는 필요하지 않습니다.

import React, { useState, useEffect } from 'react';

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Seconds: {seconds}</p>
    </div>
  );
}

export default Timer;