컴포넌트 합성

자바스크립트를 사용한 컴포넌트 합성 예제

function Border(props) {
  return (
    <div>{props.children}<div>
  );
}

function WelcomeDialog() {
  return (
    <div>
      <Border>
      {/* border 컴포넌트가 구현할 내용. children으로 받는다. */}
        <h1>Welcome</h1>
        <p>thank you</p>
      </Border>
      <Border>
        <h1>title</h1>
        <p>content</p>
      </Border>
    </div>
  )
}

예제 코드와 다르지만 일단 넘어가자.

하지만 타입 스크립트는?

props에 타입을 선언해주지 않으면 컴파일이 되지 않는다. 예전에 React.ReactNode라는걸 써본적 있는것 같은데, 그땐 뭔지도 모르고 아무렇게나 썼다. 뭔가 children과 관련이 있는것 같은데...

그래서 찾아보니 https://www.carlrippon.com/react-children-with-typescript/ 여기서 잘 설명해주고 있었다.

화살표 함수로 컴포넌트를 선언할 때 타입을 React.FC을 넣어주면 props에 children이 자동으로 포함된다.

type Props = {
  title: string;
};

const Page: React.FC<Props> = ({title, children}) => (
  <div>
    <h1>{title}<h1>
    {children}
  </div>
)

그런데 function으로 선언해주려면 FC로 타입선언이 되지 않을것 같다. 그리고 찾아보니 React.FC가 좋지 않다는 글도 보였다.

어쨌든 제일 위의 링크에서 일반적인 함수형 컴포넌트에서 children을 사용하는 방법은 몇가지가 있었는데 그중 가장 쉽고 간단하게 사용할수 있는 방법만 적어본다.

type Props = {
  title: string;
  children?: React.ReactNode;
}

일단 타입에 프로퍼티를 하나 더 추가해야 하지만 뭔가 편하다. 화살표 함수에서 굳이 FC 제네릭을 선언하지 않고 children 유무를 알 수 있다(타입힌팅으로 옵셔널 children이 보인다. FC도 보이나?;)

https://www.carlrippon.com/react-children-with-typescript/

어쨌든 FC가 좋지 않다는 링크로 돌아와서 그 이유를 읽어보았다.

역시 children이 옵셔널 프로퍼티로 항상 들어가있기 때문에 명확하지 않다는 것이 문제다. 역시 명시적 선언이 코드 가독성이 더 좋다.