Typescript : 리액트 + 타입스크립트 복습 (1) 함수형 컴포넌트의 타입, 프롭스의 타입, useRef 타입.

 

1. 리액트 함수형 컴포넌트 타입지정

const App: React.FC = () => {
  return (
    <div className="App">
      <span className="heading"></span>
    </div>
  );
};

함수 컴포넌트에 React.FC 타입을 지정하는 모습이다. FC 는 Functional Component의 약자.

선언형 함수에는 적용이 되지 않는다. 표현형 함수에만 적용이 된다. 

 

전달 받는 props가 있고, 그 props의 타입을 변수로 지정한 뒤에 입힐 때는 아래와 같이 할 수 있다. 

 

//todo.tsx

export interface Todo {
  id: number;
  todo: string;
  isDone: boolean;
}

//SingleTodo.tsx

import { Todo } from "../types/todo";

interface Props {
  todo: Todo;
  todos: Todo[];
  setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
}

const SingleTodo: React.FC<Props> = ({ todo, todos, setTodos }: Props) => {
	
    ...
    }

 

SingleTodo 라는 함수컴포넌트에서 프롭스로 받는 값은 todo, todos, setTodos 세가지이다. 

프롭스로 받아오는 값들은 오브젝트 형식으로 받아오게 된다.

그에 맞게 Props 라는 인터페이스를 생성하였다

그리고 적용하였다.  -->  { todo, todos, setTodos }: Props

이 때 React.FC 라고 컴포넌트에 적용해 주었던 타입뒤에 <Props>를 넣어주어야 한다. 

 

 

 

2. useRef에 타입 사용하기

용도에 맞게 타입을 써야 하며, 초깃값 지정을 그에 따라 해주어야 한다. 

 

1) 변수 용도로 useRef를 사용한다면, 

const localVarRef = useRef<number>(0);

제네릭 타입과 같은 타입의 초깃값을 넣어준다.

 

 

2) DOM을 직접 조작하기 위해 프로퍼티로 사용할 경우, 

const inputRef = useRef<HTMLInputElement>(null);

초깃값으로 null을 넣어준다.

 

 

 

 

 

참고사이트

https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5