웹 컴포넌트

웹 컴포넌트

React와 웹 컴포넌트는 해결하려는 문제가 서로 다릅니다. 웹 컴포넌트는 재사용할 수 있는 컴포넌트를 목적으로하고, React는 데이터와 DOM을 동기화하는 선언적 라이브러리를 목적으로 합니다.

React에서 웹 컴포넌트 사용하기

class HelloMessage extends React.Component {
	render(){
		return <div>Hello <x-search>{this.props.name}>/x-search>!</div>
	}
}

웹 컴포넌트에는 강제성있는 API들이 있습니다. 예를 들어 video는 play()나 pause()를 열어놓고 있습니다. Ref를 사용해야만 해당 API에 접근할 수 있습니다. 또한 웹 컴포넌트에서 나온 이벤트들은 React렌더링 트리에 정상 작동하지 않을 수 있어 이를 다루기 위한 핸들러를 React 컴포넌트 내에 각각 만들어야 합니다.

웹 컴포넌트는 className이 아닌 class를 사용합니다.

babel로 클래스를 변환하려면 코드가 작동하지 않을 수 있습니다. 그럴 땐 custom-elements-es5-adapter를 추가해야 합니다.