React의 특수 prop, children

React의 특수 prop : children

children은 React에서 사용하는 특수한 prop으로, 컴포넌트 태그 사이에 위치한 모든 내용을 나타낸다.
부모 컴포넌트에서 자식 컴포넌트로 전달되어, 자식 컴포넌트 내부에서 렌더링될 수 있다.


아래와 같이 <LoginProvider>와 </LoginProvider> 사이에 위치한 내용이 children이 된다.

<LoginProvider>사용자 로그인 중...</LoginProvider>

위 코드에서 "사용자 로그인 중..."이라는 내용이 LoginProvider 컴포넌트의 children prop으로 전달된다.

children 대신 다른 변수를 사용하면?

React에서 children을 다른 변수로 대체하려고 하면 오류가 발생한다. 이는 React가 children을 특별하게 취급하며, children이 항상 존재해야 하고 올바른 타입이어야 한다는 규칙을 따르기 때문이다. 만약 children이 누락되거나 잘못된 타입일 경우, React는 에러를 발생시킨다.


React의 컴포넌트 트리 구조에서 children은 부모-자식 관계를 정의하는 핵심적인 역할을 수행한다. 
children을 활용하면 부모 컴포넌트에서 자식 컴포넌트를 렌더링하고, 필요한 props를 전달할 수 있다.