Portfolio


const Header = ({children, level=1}) => {
	let Tag = `h${level}`
	return <Tag>{children}</Tag>
}


const Spacer = ({ children, type="horizontal" size=8 }) => {
	...

//유효한 자식 컴포넌트들의 props를 수정해서 새로운 자식들을 만듦
	const nodes = React.Children.toArray(children)
		.filter(element=>React.isValidElement(element) && element.props.__Type === "SpacerItem")
		.map((element, idx, elements) => {
			return React.cloneElement(element, {
			...element.props,
				style: {
					...element.props.style,
					marginRight: type === 'horizontal' && index !== elements.length -1 ? size : undefined,
					marginBottom: type === 'vertical' && index !== elements.length -1 ? size : undefined,
				}
			})
		})
	
	return (
		<div {...props} style={..}>
			{nodes}
		</div>
	)


<i>
	<svg>...</svg> //스피너 svg
</i>


navigator.clipboard.writeText(스트링)

컴포넌트에 익숙해지기