[React] 'as' props

React 컴포넌트 라이브러리 중 'as'라는 이름의 프로퍼티를 사용하는 경우가 있는 것 같다. (아마 material UI로 추측한다.)
as의 역할은 해당 컴포넌트 외부(다른 파일)로부터 HTML을 가져와서 대체할 수 있도록 해주는 것이다.
기본 JSX/HTML 문법은 아니고, 일부 라이브러리에서 사용하는 것으로 보인다.

예시 코드

// class형 컴포넌트
...
return (
  <Form
    name="studentName"
    placeholder="name"
    ...
    as={studentInputText}  // 다른 폴더에 있던 파일
  />
...
)

 

'studentInputText' 컴포넌트에서는 <Form> 태그에 전달된 prop들을 그대로 사용할 수 있다.

 

사용 이유?

정확히 알기 힘들지만(한글 자료 너무 없음!) 코드를 직접 만져 본 입장에서는 유지보수의 의미가 큰 것 같다. 해당 컴포넌트에 조건이 너무 많이 걸려 있거나 내부 작업이 많이 필요하다면 메인 컴포넌트(그러니까 studentInputText가 import된 부모 컴포넌트)에서 이를 따로 분리하는 것이 가독성을 높이고 한 파일이 너무 길어지는 걸 방지할 수 있을 거다.

 

https://www.robinwieruch.de/react-as-prop/

React "as" Prop