13. 리액트에서 사용하는 타입스크립트

HTML 타입

 

const usernameInput = document.getElementById('username') as HTMLInputElement;
const submitButton = document.getElementById('submit') as HTMLButtonElement;

 

다음과 같이 HTML태그Element 형태로 DOM 노드에 대한 타입을 사용 가능.

 

이벤트 타입의 경우 이벤트에 따라 다양하게 있는데, 뭐 onClick의 경우 MouseEvent임. VSCode에서 하나씩 찾아보면 됨!

 

React 타입

 

• Prop : 인터페이스 이용

interface Props {
  className?: string;
  id?: string;
  children?: ReactNode;
  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
}

const Button = ({ className = '', id, children, onClick }: Props) => {
  const classNames = `${styles.button} ${className}`;
  return (
    <button className={classNames} id={id} onClick={onClick}>
      {children}
    </button>
  );
}

 

Button 함수의 프롭(파라미터)의 타입을 Props에서 정의함.

리액트의 모든 컴포넌트에서 children props를 사용할 수 있는데, 이는 태그 사이의 내용에 해당함!

children의 경우 ReactNode라는 타입을 사용함. 이는 여러 타입을 받아들여서 가장 범용적임!

 

 

• Hook

const names = useState<string[]>([]);
const formRef = useRef<HTMLFormElement>(null);

- useState : 초깃값 지정시 자동 타입 추론 -> 배열 자료형을 사용할 때 쫌 주의

- useRef : 대상이 되는 DOM 노드의 타입을 제네릭으로 지정 + 초기값을 null로 지정!

 

• 이벤트 핸들러

HTML 이벤트 타입과 동일하게 -Event로 끝나는 타입!
그러나 엄연히 다르기 때문에 react로부터 import 해줘야함.

제네릭으로 DOM 노드 타입을 지정해주면, 이벤트 타겟의 타입을 지정할 수 있음!

 

• React.FC

리액트에서 함수형 컴포넌트를 선언할 때 타입 선언에 쓸 수 있도록 리액트에서 제공하는 타입임.

const Register2: React.FC = () => {

const Greetings: React.FC<GreetingsProps> = ({ name }) => (

뭐 이런식으로 사용하게 됨! props의 타입을 제네릭에 넣어서 사용함.

GreetingsProps에 이제 들어오는 Props의 타입(인터페이스)가 담겨있음!

 

그러나 이를 지양해야합니다.

 

React.FC의 경우 기본적으로 props에 children이 있는 채로 동작한다. 그러나 리액트의 컴포넌트 중에는 children이 존재하지 않는 컴포넌트도 분명히 많다!

-> children에 대한 명확한 타입 체크가 되지 않음!

 

따라서 위에서 했던 것 처럼 interface로 Props의 타입만을 만들어 사용하는 것이 좋음!

 

 

• API 호출시 제네릭 사용

export type API<T> = {
	data:T[],
    totalPage:number,
    page:number,
    ,,,
}

export type RestaurantResponse = API<Restaurant>;
export type CafeResponse = API<Cafe>;

 

api 호출시 기본적인 프레임은 동일한 채 data의 내용이 바뀌는 경우가 많은데,

이 때 제네릭을 활용하면 호출 값에 따라 쉽게 타입을 생성할 수 있다.

재사용함으로써 아주 야무진 코드를 짜는 것~~