Component

나는 꽤 오래 전부터 타입스크립트를 사용해 특정한 컴포넌트만을 걸러낼 수 있을지 궁금했다. 만약 이게 가능하다면 특정한 컴포넌트만을 children으로 받게 만들 수 있어 프로젝트의 전체적인 구조가 단단해질 거라 생각했다. 실제로 특정 컴포넌트를 걸러내기 위해서 나는 타입스크립트를 가지고 아주 다양한 시도를 해보았으며, 이 포스트는 수많은 삽질 속에서 알게 된 내용을 정리한 것이다. 컴포넌트를 이루는 타입들ReactNode나는 리액트 컴포넌트의 props로 children을 넘겨야 할 때, 항상 그 타입을 ReactNode로 선언했다. 습관 같은 것이었고 이에 대해 깊게 생각해본 적이 없었다. 결론부터 말하자면 ReactNode는 ReactElement를 포함하는 타입이다. 아래는 리액트에서 선언한 Re..

합성 컴포넌트 패턴이란 무엇인가합성 컴포넌트 패턴(Composite Component Pattern)은 컴포넌트를 보다 유연하게 구성하고 재사용할 수 있도록 여러 하위 컴포넌트를 조합하여 만든 컴포넌트이다. 세간의 인식은 조금 더 복잡한 무언가를 예상하는 듯하지만, 실제로는 리액트를 사용하는 사람이라면 누구나 children을 통해 합성 컴포넌트 패턴을 사용하고 있다.function Dialog({ children }) { return {children};}function App() { return ( 이것은 합성 컴포넌트입니다. );} 만약 특정한 형태의 컴포넌트만을 사용하고 싶다면 children 대신 다른 props 이름을 사용하여 아래와 같이 구현할 수도 있다. pro..