Archive

React에서 Typescript 사용하기 - 1

30 Aug 2021 | Typescript

React에서 Typescript 사용하기 - 1

1. tsx, ts

  • React 컴포넌트이다 ? => tsx 사용
  • reducer, redux 등 jsx가 아닌 파일이다? => ts 사용
  • React 컴포넌트인데 .ts 쓰면 에러남

2. Props

  • 부모 컴포넌트에서 자식 컴포넌트에 props 전달 시 자식이 받게 될 props interface를 정의해야한다
// Child.tsx
interface ChildProps {
    color: string;
    onClick: () => void;
}
export const Child = ({ color, onClick }: ChildProps) => {
    return <div onClick={onClick}>{color}</div>
}

// Parent.tsx
import { Child } from './Child';

const Parent = () => {
  return <Child color="red" onClick={() => console.log('hi')} />
};
  • React 컴포넌트는 옵션으로 propTypes, displayName, defaultProps, contextTypes를 prop으로 내려줄 수 있지만 타입스크립트는 이게 리액트에서 만들었다는걸 알 수 없다
  • React.FC<>를 명시함으로서 해당 함수가 리액트의 컴포넌트라는걸 알려줄 수 있다
  • 이로써 propTypes, displayName, defaultProps, contextTypes 등도 배정받을 수 있다
  • React.FC<프롭타입> 제네릭에 프롭타입을 적어서 props의 타입도 정의할 수 있다
export const ChildAsFC: React.FC<ChildProps> = ({ color }) => {
  return <div>{color}</div>
}
  • children 전달 시에도 React.FC는 자동적으로 전달을 해주는 반면, 일반 함수형 컴포넌트는 interface 등에 수동적으로 타입을 명시해야한다
export const ChildAsFC: React.FC<ChildProps> = ({ color, children }) => {
    return (
    	<div>
        	{color}
            {children}
        </div>
    );
}

// Parent.js
const Parent = () => {
  return <ChildAsFC color="red" onClick={() => console.log('gdgd')}>
    children입니다.
  </ChildAsFC>
};


3. State

useState 사용 시 useState<type>의 제네릭 부분에 타입을 명시할 수 있다.

단순 string, number 등은 타입스크립트가 추론할 수 있지만 array, object등은 따로 적어줄 필요가 있다

const Example: React.FC = () => {
    const [name, setName] = useState('');
    const [lists, setLists] = useState<string[]>([]);
    
    const handleClick = () => {
    setLists([...lists, name]);
	}
    //...
}

// const [lists, setLists] = useState([]);
// 타입을 안적으면 lists의 타입은 never[]가 되어 에러가 발생한다


object는 분해하여 각각 타입을 적는 것도 가능하다. fetch 등 데이터를 받아서 뿌리거나, 유저의 행동에 따라 UI에 추가되는 부분이라면 초기 렌더링 시 state가 undefined가 되는 경우도 있다. 이럴땐 유니온타입을 이용해 타입을 명시할 수 있다.

const User: React.FC = () => {
  const [name, setName] = useState('');
  const [user, setUser] = useState<{ name: string, age: number } | undefined>();
  
  //...
  return (
  	<div>{user?.name}</div>
  );
};

참고 자료

udemy - React and Typescript: Build a Portfolio Project

Related Posts