타입스크립트로 컴포넌트를 정의할 때 2가지 방법이 있다.
부모컴포넌트에서 자식컴포넌트로 props 정의하면서 2가지 정의방법에 대해 차이점도 알아보자.
Child.tsx 코드를 보게 되면 props에서 color, onClick을 비구조화로 바로 뺴주면서 ChildProps 인터페이스 타입이라고 말해주고 있다.
쓰는 문법이 조금 달라졌다. 컨포넌트명에 React.FC<> 직접 작성해주고 있는데 기능적인 차이가 몇가지 있다.
** TypeScript 에게 이건 리액트 컴포넌트라고 알려줌으로서 컴포넌트의 기본 내장함수들을 쓸 수 있다.
이 차이를 보면 React.FC 로 정의한 컴포넌트에 한해서만 컴포넌트에서 자주 쓰이는 내장되어 있는 defaultProps를 쓸 수 있다. Child 컴포는 자동완성에도 뜨지 않는다.
** 2번째는 children 이다.
우선 부모 컴포를 살짝 수정해보겠다.
Child 태그를 열고 닫기 전에 아무 텍스트를 넣어주었다. 이 텍스트는 자식컴포의 props 의 children에 담겨 넘어가게 되어있다. 보이는 것과 같이 에러가 나있는데 당연한 것이 우리는 ChildProps 에서 children에 관해 타입을 지정해준 것이 없기 때문이다.
단순히 props로 받는 것에 children 인자만 추가해준뒤 사용하면 된다.
물론 첫번째 방법으로 정의한 Child 컴포도 인터페이스에 정의해준 뒤에 가져다 쓸 수 있지만 조금 더 추가적인 작업이 필요하겠다.
** 큰 차이는 없겠지만 정리하자면
우선 문법의 차이, 리액트 컴포넌트로 인식 되었을때 사용할 수 있는 기본 내장 함수들의 사용 여부, children 활용시 조금더 간편하게 작업 가능
정도가 있겠다.