React.FC를 사용하지 말아야 하는 이유

이 글은 아래 링크의 글을 번역해서 작성했습니다.

https://medium.com/raccoons-group/why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13

 

----

 

이 글은 미세한 차이가 있지만, 읽어보면 React.FC를 사용하는 것에 대한 의견이 바뀔 수도 있을 겁니다. 이 글은 개인적인 의견임을 알아주세요. 만약 React.FC를 사용하는 것을 좋아하고 잘 동작한다면, 계속 사용하세요! 😄 하지만, 더 보기를 원한다면 계속 읽어주세요.

 

함수 컴포넌트

수많은 코드베이스에서, 이것과 비슷한 컴포넌트를 찾을 수 있을 겁니다.

const MyComponent: React.FC<{ message: string }> = ({
  message,
}) => <div>{message}</div>;

 

React.FC(또는 React.FunctionComponent)가 주는 이득이 있나요? MyComponent에서 전달받은 프로퍼티가 타이핑되었습니다. 개인적으로 이건 불필요해 보입니다. 아무런 이득이 없고 오히려 단점을 가지고 있습니다.

 

단점

암묵적 자식 요소

React.FC 또는 React.FunctionComponent는 자식 요소가 있다는 암묵적 정의를 제공합니다. 이건 컴포넌트를 React.FC로 타이핑 했을 때, 컴포넌트가 자동적으로 자식 요소를 가지게 된다는 의미입니다.

 

위 예제의 컴포넌트는 아래처럼 사용될 수 있을 겁니다.

function Container() {
  return (
    <MyComponent message="this does something">
      this does nothing
    </MyComponent>
  );
}

 

위 예제는 아무런 typescript 에러가 발생하지 않겠지만, 실제로는 에러가 발생했어야 합니다. 왜냐면 자식 요소는 아무것도 하지 않기 때문이죠. 자식 요소의 타입을 수동으로 타이핑한다는 것은 자식 요소를 제어할 수 있다는 의미이기도 합니다.

 

만약 아래처럼 MyComponent를 적용한다면,

const MyComponent = ({ children }: { children: string}) => (
  <div>{children}</div>
);

 

위와 같이, 자식 요소로 문자열을 제공해야 한다는 정보를 얻게 될 것입니다.

function Container() {
  return <MyComponent>this is your string message</MyComponent>;
}

 

일반적으로, 컴포넌트에 전달할 데이터를 유연하게 만들고 싶다면 children: React.ReactNode를 사용할 수도 있을 겁니다.

 

복합 컴포넌트는 읽기 어렵습니다

아래처럼 사용되는 컴포넌트를 만들어야 한다고 생각해보죠.

<Select>
  <Select.Item>Item 1</Select.Item>
</Select>

 

React.FC를 사용해서 복합 컴포넌트를 만들 수도 있겠지만, 타이핑은 코드의 가독성을 떨어뜨릴 것입니다.

const Select: React.FC<SelectProps> & { Item: React.FC<ItemProps> } = (props) => {/* ... */ }
Select.Item = (props) => { /*...*/ }

 

React.FC 없이도 잘 동작합니다.

const Select = (props: SelectProps) => { /*...*/ }
Select.Item = (props: ItemProps) => { /*...*/ }

 

물론, 더 많은 단점이 있고 자세히 알고 싶다면 이걸 읽어보시길 권해드립니다.

https://github.com/facebook/create-react-app/pull/8177

 

결론

React.FC를 사용하면 초보자들이 쉽게 접근할 수 있기 때문에 어느 정도 가치가 있지만, TypeScript를 사용하는 데 익숙해지면 컴포넌트를 적절하게 타이핑해서 원하는 대로 사용하는 것이 중요하다고 생각합니다.