React Sub-component 체험기

회사에서 코드를 보는데 신기한 코드가 있었다.

<Header>
	<Header.Title></Header.Title>
    <Header.Body></Header.Body>
</Header>

물론 실제 코드는 아니다. 비슷하게 적어봤다.

아무튼 저걸 보고서 굉장히 편하고 좋다고 생각했다.
프로젝트 특성상 depth가 많이 들어가는데,
매번 컴포넌트 이름을 길게 적으면 가독성이 떨어지기마련이다.

'근데 이걸 어떻게 하지?'라는 생각이 들어서
코드를 보니 생각보다 간단했다.

const Header = () => {...}

const HeaderTitle = () => {...}

const HeaderBody = () => {...}

Header.Title = HeaderTitle;
Header.Body = HeaderBody;

그렇다. 까먹고있었다.
JSX도 결국에는 Javascript 오브젝트였다는것을.
프로퍼티로 JSX를 주는 방법이었다.

---

참고자료

이런 기법의 이름이 뭔지 몰라서
'react subcomponent'라고 검색했더니...

진짜 이름이 sub-component였다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이정도면 센스라면 나는 개발의 신이 아닐까?
(커피를 먹었더니 텐션이 좋네요)

아래의 링크는 잘 정리된 글이다
더 알고싶다면 읽어보자.

React sub-components - Maxime Heckel's Blog