리엑트에서 타입스크립트 적용하기

타입스크립트는 javascript의 수퍼셋으로 언어이다.

리엑트뿐아니라 javascript를 사용하는 곳에서 타입지정을 하여 사용하는 언어이다.

타입스크립트 전체는 공식문서를 참조하고,

나는 타입스크립트와 리엑트(라이브러리)에서 사용하는 법을 다룬다.

타입스크립트의 일반적인 사용

const a: number = 32;
const b: string = 3; // error

위와같이 변수선언을 하며 그 변수는 타입이 뭐다 라고 정의하는 것이다. 이는 컴파일이 되기도 전에 사전에 에러를 개발자로 하여금 알 수 있게 해주고 다른 개발자(협업에 있어 좋은 점)도 확연히 알 수 있게 되는 것이다.

타입스크립트를 리엑트에 적용

interface RatingType {
  piece?: string | number | React.ReactElement;
  pick?: string | number | React.ReactElement;
}


const Rating: React.FC<RatingType> = ({
  piece = 'piece',
  pick = 'pick',
}) => {
  return (    
      <PieceWrap
        pieceWidth={pieceWidth}
        pieceStyle={pieceStyle}
      >  
  );
};

interface를 사용하여 받을 데이터(props)의 타입을 확인한다.

원래 타 언어에도 그렇고 일반적은 interface와 같으나 리엑트에서는 하나의 타입체크용으로 사용되어진다.

인터페이스로 받은 값들의 타입을 확인하는 것이다.

컴포넌트를 선언하는 변수에서 타입을 확인한다.

또한 함수형 컴포넌트를 사용하여 컴포넌트를 선언하였는데 위와같이 const Rating: React.FC<RatingType>라는 식별자 컴포넌트명: 리엑트의 함수컴포넌트다 라고 타입을 말해주고 있다.

타입을 지정해야되는 곳은 리엑트도 마찬가지다.

리엑트에서 처음 적용을 하려다보면 적응이 잘 안될 수 있다. 그러나 타입스크립트가 왜 쓰는지, 어디에 쓰이는지를 생각해보면 리엑트도 마찬가지다. 변수를 선언하거나 함수를 사용할 때 등 같다.

컴포넌트를 만들고 함수를 작성했다면 그 함수를 선언할 때 타입을 체크할 수도 있고, 만약 스타일컴포넌트를 사용했다면 그것도 컴포넌트기에 타입을 지정할 수 있다.

const Rating: React.FC<RatingType> = ({
  piece = 'piece',
  pick = 'pick',
}) => {
 

const clickHandler = (click: React.SetStateAction<number>) => {
    setPickedPieceIndex(click);
    setHoverPieceIndex(-1);
    userFunc(click, pickedPieceIndex);
};
    
return (  

const Warp = styled.div<WarpType>`
  position: relative;
  height: ${(props) => props.pieceHeight}px;
  width: ${(props) => props.pieceWidth * props.pieceCount}px;
`;

interface WarpType {
  pieceHeight: number;
  pieceWidth: number;
  pieceCount: number;
}