React TypeScript 2가지 Component Type Annotation

리액트와 타입스크립트를 합쳐서 같이 개발할 때 컴포넌트들을 수도 없이 많이 만들 테니 

컴포넌트를 정의할 때의 Annotation 방법 2가지에 대해 간단히 알아보자.

 

 

interface ChildProps {
  color?: string;
  onClick: () => void;
}


// 1.

export const Child = ({color, onClick}: ChildProps) => {
  return <div>{color}
    <button onClick={onClick}>Click Me</button>
  </div>
}


// 2.

export const ChildAsFC : React.FC<ChildProps> = ({color, onClick} ) => {
  return <div>{color}
  <button onClick={onClick}>Click Me</button>
  </div>
}

 

 

보게 되면 ChildProps 가 붙는 방식이나 props에서 비구조화로 꺼내와 줄 때 차이들이 보인다. 

 

단순히 쓰는 방식만 다른것이 아니라 기능적으로도 차이가 나는데 우선 1번 방식으로 하게 되면 리액트에서 기본적으로 컴포넌트가 가지는 기본 메소드를 이용하지 못한다. 

 

 

리액트에서 defaultProps, displayName 등 컴포넌트로서 가지는 메소드들을 사용하지 못한다. 

 

 

또한 props로 전달 받을 때 children 기능의 차이도 가지게 되는데 

 

Parent 컴포넌트에서 Child 컴포넌트로 props로 전달해 줄 때의 예시를 들어보면

 

// Parent 컴포넌트

import {Child} from './Child';

const Parent = () => {

  // 1.
  return <Child color='red' onClick={() => console.log('Clicked')} />  
  // props들만 전달

  
  
  // 2.
  return <Child color='red' onClick={() => console.log('Clicked')}>
  I'm children zz
  </Child>  
  // 이렇게 사이에 텍스트가 낄수도 있다. (children 이름으로 넘어간다.)  
}

export default Parent;

 

이렇게 컴포넌트를 import 해서 써줄 때 children 값으로 넘어 갈 수도 있는데 위의 코드블록에 나온 1번처럼 컴포넌트를 정의해주면 

 

에러가 발생하게 되고 props interface에 따로 children과 타입을 지정해줘야 한다. 

 

하지만 위의 코드블록의 2번방식으로 하면 

 

인터페이스에 더 손댈필요도 없고 이미 함수형 컴포넌트라고 인지하고 있기에 children 기능도 인지하고 있어 children을 바로 쓸 수 있게 된다. 

 

 

 

** 당장 컴포넌트 하나를 정의하는 데 걸리는데의 귀찮음은 2번 방식이 더 귀찮을 테지만 그 후에 작업할 때 기능적으로 편한 것은 2번 방식인 것 같다.