23.08.09
1. React.FC 사용 지양 & 대안
타입스크립트를 사용하여 리액트로 개발을 처음 시작하다보면 한 번은 마주치게되는 React.FC
자식 컴포넌트에 props를 내려줄 때 props에 대한 타입을 지정해주기 위해 React.FC를 사용하게 되는데 ...
그런데 여러 문서와 블로그에서는 React.FC 사용을 권장하지 않는다.
왤까 ?
1-1. FC
FC (Function Component) : 함수 컴포넌트
interface TodoProps {
title: string;
contents: string;
}
const App: React.FC<TodoProps> = ({title, contents}) => {
return <div> 제목 : {title}, 내용 : {contents} </div>;
}이런 식으로 FC는 title과 contents라는 props에 대한 타입인 TodoProps를 지정해주기 위해 쓰인다.
1-2. React.FC 사용을 지양하는 이유
- children을 암시적으로 가지고 있다.
FC를 이용하면 컴포넌트 props는 type이 ReactNode인 children을 암시적으로 가지게 된다.
Q. 그렇다면 여기서 ReactNode란 ?
A. ReactNode 타입은 jsx나 tsx 내에서 사용할 수 있는 모든 요소의 타입으로 즉, string, null, undefined 등을 포함하는 가장 넓은 범위를 갖는 타입
=> 즉, 이는 안티패턴으로 이로 인해 의도하지 않은 동작을 하거나 런타임 에러 캐치가 힘들 수 있기에 지양하면 좋다 !!!!!!
-
제네릭을 지원하지 않는다.
제네릭을 사용하는 상황에서는 React.FC를 사용하면 타입 추론이 제대로 이루어지지 않을 수 있다. -
네임 스페이스 패턴 이용이 불편하다.
Q. 그렇다면 여기서 네임 스페이스 패턴이란 ?
A. 그룹화하고 논리적으로 분리하는 패턴
const App = () => {
return (
<div>
<ComponentsA.ComponentA />
<ComponentsA.ComponentB />
<ComponentsB.ComponentC />
</div>
);
}1-3. 대안
그렇다면 React.FC를 사용하지 않고 어떻게 사용할 수 있을까 ?
interface TodoProps {
title: string;
contents: string;
}
const App = (props: TodoProps) => {
return <div> 제목 : {props.title}, 내용 : {props.contents} </div>;
}이렇게 사용하면 위에서 React.FC를 사용한 코드와 의미는 같지만 사용을 지양할 수 있게된다.
+) 그런데 이 방법말고 또 다른 방법있다면 댓글로 알려주실 분 구합니다 ...
