리액트 - 타입 선언 방법

리액트 프로젝트를 진행하면서 타입 선언에서 막히는 부분이 많았었다.
그런 부분에 대해서 이해하고 학습한 내용을 정리해보려고 한다.

React.FC

FC란 Function Component의 줄임말이다.
함수형 컴포넌트 사용 시 타입 선언에 사용할 수 있도록 React에서 제공하는 타입이다.

type HeaderProps {
	title: string;
};

const Header: React.FC<HeaderProps> = ({ title }) => {
	return <div>{title}</div>;
};

React.ComponentType

React.ComponentType은 함수형 컴포넌트와 클래스 컴포넌트를 모두 나타낼 수 있는 타입이다.

type HeaderProps = {
	title: string;
};

const Header: React.ComponentType<HeaderProps> = ({ title }) => {
	return <div>{title}</div>;
};

ReactNode

ReactNode란 모든 종류의 자식 요소를 나타내는 타입이다.
어떠한 자식 요소든지 전달할 수 있다.

type ContentProps = {
	children: React.ReactNode;
};

const Content: React.FC<ContentProps> = ({ children }) => {
	return <div>{children}</div>
}

SetStateAction

SetStateAction이란 useState 훅에서 사용되는 매개변수 타입이다.

type CounterProps = {
	count: number;
  	setCount: React.Dispatch<React.SetStateAction<number>>;
}

const Counter: React.FC<CounterProps> = ({ count, setCount }) => {
  const handleCounter = () => {
  	setCount((prevCount) => prevCount + 1)
  };
	return (
    	<div>
      		<button onClick={handleCounter}>카운트</button>
      	</div>
    )
}

const List: React.FC = () => {
  	const [count, setCount] = useState<number>(0);
	return (
    	<div>
      		<Counter count={count} setCount={setCount} />
      	</div>
    )
}

Event

Input 태그에서 이벤트를 사용할 때는 아래와 같이 이벤트 별로 다른 형식의 타입을 사용해야한다.

// Input Event
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
	const { value } = e.target;
  	setInput(value);
}

// Select Event
const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
	const { value } = e.target;
  	setSelect(value);
}

// KeyDown, KeyUp Event
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
	const { value } = e.target;
  	setKeyDown(value);
}