인프런 커뮤니티 질문&답변

안녕하세요:) 타입스크립트로 리액트 프로젝트를 만들려고 시작하던중 "수업이외에 실무에서는 어떤식으로 많이 사용할까?" 라는 생각에 유튜브등 영상을 시청하면서 궁금한 사항이 생겨 질문을 남깁니다.

리액트를 타입스크립트로 시작하는 방법을 배웠습니다. (공식 홈페이지 명령어입니다.)

• 아래 코드를 입력할 경우 타입스크립트 기본세팅으로 리액트 프로젝트가 생성됩니다.

npx create-react-app my-app --template typescript

(수업방식으로 시작) App.tsx 컴포넌트(시작점) 파일을 살펴봅니다.

• 아래 코드는 초기세팅입니다.

import React from 'react'

const App = () => {
  return (
    <div>App</div>
  )
}

export default App

(실무에서 사용한다는 영상) App.tsx 컴포넌트(시작점) 파일을 살펴봅니다.

• 아래 코드는 초기세팅에 React.FC를 함수타입에 지정하고 시작합니다.

   

import React from 'react'

const App:React.FC = () => {
  return (
    <div>App</div>
  )
}

export default App

궁금한 사항

React.FC는 타입스크립트에서 함수에 사용하게 만들어둔 함수 타입입니다.

React.FC를 지양하는 사람도 존재하고 지향하는 사람도 존재하는데 과연 어떤걸 사용하는게 맞을까요?

그냥 여쭤보면 생각없이 답만 얻어가는 느낌이라 조사를 조금 했습니다.

React.FC는 단점이 존재합니다.

1. React.FC를 사용해줄 경우 props에 자동으로 children props가 존재합니다. 이것은 chidren이 존재한다는 가정하에 사용하기 때문에 타입스크립트를 사용하는 의미가 있을까? 라는 의문을 제기합니다.

2. default Props에 오류가 생깁니다. 현재는 이 오류가 업데이트되면서 많이 사라졌다고는 하는데 default Props는 리액트의 고정 props를 지정해야하는 경우?? 많이 사용해야 하기때문에 갑자기 오류가 나타난다면 이것도 단점이 될 수 있습니다.

3. React.FC를 사용함으로 코드가 쓸대없이 길어집니다. 모든 컴포넌트에 쓸대없이 다 붙여준다면 이것도 단점이 될 수 있겠죠? (타입 추론으로 인해 지정하지 않았던 걸까요?)

이상으로 질문 내용이였습니다. 과연 React.FC를 쓰는것이 맞는건지? 수업내용중 안쓰고 생략한 이유는 타입추론 떄문인건지가 궁금합니다. 긴 내용 읽어주셔서 감사합니다 :)