children은 컴포넌트 태그 사이에 작성된 모든 내용을 하나로 묶어 전달하는 특별한 속성입니다. 내용이 여러 요소로 구성되었어도 리액트는 이를 자동으로 하나의 children 값으로 처리합니다. 따라서 한 컴포넌트에 children을 2개 이상 따로 지정할 수는 없습니다.
Note ref와 key 속성은 props로 전달 불가능
리액트에서는 보통 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 props를 사용합니다. 하지만 ref(리액트 18까지)와 key는 예외입니다. 두 속성은 자식 컴포넌트에서 props.ref 또는 props.key로 접근할 수 없습니다. 두 속성은 리액트가 내부적으로 따로 관리하고 props 객체에는 포함하지 않습니다. 이는 ref와 key가 일반적인 데이터 전달용이 아니라 리액트 내부에서 특별한 용도로 사용하는 속성이기 때문입니다.
• ref: DOM 요소나 컴포넌트를 직접 참조할 때 사용합니다.
• key: 리스트를 렌더링할 때 가상 DOM에서 항목을 효율적으로 식별하고 업데이트하기 위해 사용합니다.
key를 자식 컴포넌트에서 고유 값으로 사용하고 싶다면 id와 같은 별도의 속성으로 전달해야 합니다. ref는 forwardRef를 사용하면 자식 컴포넌트에서 별도의 매개변수로 받을 수 있습니다.
참고로, 리액트 19부터는 ref도 일반 props처럼 전달할 수 있도록 변경되었습니다.