<aside> 💡 다른 컴포넌트들을 범용적으로 담을 수 있는 하나의 컴포넌트를 어떻게 만들 수 있을까?

</aside>

React는 컴포넌트 중심으로 이루어진 프레임워크이다. 최대의 장점중 하나는 만들어 놓은 컴포넌트들이 reusable하다는 것인데, 이러한 장점을 극대화 시킬 수 있는 방법(props.children)에 대해 정리해보려고 한다.

1. Why do we need this technique???

컴포넌트 기반의 React 사용하다보면, 버튼, 사이드바, dialog와 같은 자주 반복되어 사용되는 것들에 대해 미리 컴포넌트로 만들어 놓고 사용하면 좋겠다! 라는 생각이 들 것이다. 하지만, 각각의 컴포넌트에 들어가는 내용들은 다 달라질 수 있기때문에 우리는 어떤 자식엘리먼트가 이 reusable한 컴포넌트에 들어올 지 예상 할 수 가 없다.

이러한 (박스역할을 하는)컴포넌트들에서는 props.children을 이용하여 자식엘리먼트들을 그대로 출력하는 것이 좋다.

2. How does it work???

우리가 따로 전달해 주지 않아도 자동적으로 전달이 되는 props가 있는데, 그것이 바로 props.children이다. 어떻게 정확히 출력되는지는 아래의 예를 통해 정리하고자 한다.

자, 위와 같이 type이라는 props를 전달해준 Button이라는 컴포넌트가 있다고 하자.

그리고 위와같이 Button컴포넌트에서 props 콘솔로 찍으면 어떤 결과가 나오게 될까??? types="submit"이라고 나올거라 예상하겠지만, (물론 당연히 이도 맞다. ) Button이라는 컴포넌트 안에 "Add User"라는 텍스트가 들어가 있기때문에(as children) 아래와 같이 type 이외에 children이라는 props가 하나더 전달이 되게 된다.

(**참고로 Add User없이 빈 버튼만 있다면 당연히 children이라는 props는 전달되지 않을 것이다. )

그래, props.children이라는 것이 해당 컴포넌트 하위에 있는 자식 elements들을 그대로 출력하는 것! 은 이해했다.

그치만, 여러개의 엘리먼트를 가지고 있는 컴포넌트라면 어떻게 될까???