[React] fragments, forward props, 여러 JSX 슬롯 활용법

Fragments 사용법

값을 하나만 반환하기 때문에 하나의 상위 태그로 묶어줘야 함.

→ 상위 태그를 <div>로 묶게 되면 DOM에 div가 2개 생겨서 중복되는 요소가 생김

 

fragment 컴포넌트

• root 컴포넌트가 필요한 경우 형제 컴포넌트를 감싸는 용도로 사용
• 화면상으로 보이는 실제요소를 렌더링 하면 안됨
• Fragment import 해서 가져옴
• <Fragment> 태그로 감싸주면 불필요한 div가 사라진 걸 확인할 수 있음.
• Fragment 가져올 필요도 없이 <> (빈 태그) 로 대체할 수 있음.

 

내부 요소에 Props이 전달되지 않을 경우

커스텀 컴포넌트 Section

export default function Section({title, children}) {
	return (
		<section>
			<h2>{title}</h2>
			{children}
		</section>
	);
}

 

Section 컴포넌트를 사용할 때

<Section id="examples">

리액트에서는 요소에 대한 props가 개발자가 설정한 대로만 적용 → id값이 적용되지 않음.

• props에 id를 할당
• 커스텀 컴포넌트 <section id={id}>
  • 수동으로 매 속성을 내장 섹션 안에 넣어야 함
  • 비효율적임

 

forward props(proxy props)

export defult function Section({title, children, ...props})
	return(
		<section {...props}>
			<h2>{title}</h2>
			{children}
		</section>
	);
}

• … ← 자바스크립트 내장 문법(Rest 파라미터)
• 이 구역 컴포넌트에서 사용할 있는 모든 다른 props를 모아와서 props object(속성 개체)로 병합
• props라는 자바스크립트 객체에 props로 분류되는 모든 것이 모여 컴포넌트로 들어감.
• section 태그 안에 스프레드 연산자를 사용
• wrapper component에 사용하기 좋음 ex) section 컴포넌트

 

여러 JSX 슬롯 활용법

export defult function Tabs({children}){
	return<>
		<menu>
			<TabButton
				isSelected={selectedTopice==='components'}
				onClick={()=>handleSelect('components')}> Components </TabButton>
			<TabButton
				isSelected={selectedTopice==='jsx'}
				onClick={()=>handleSelect('jsx')}> jsx </TabButton>}
		</menu>
		{children}
	</>
}

• TabButton에 있는 onClick을 현재 선택되어있는 컴포넌트에서 제어해야 함
• 컴포넌트 데이터에 따라 결정되며 모든 탭과 관련된 상태를 제어

 

export defult function Tabs({children, selecteTopic, onSelectTab})

• Tabs안에 props를 더 늘려도 되지만 Tabs 컴포넌트의 재사용성을 어렵게 만듦

 

export defult function Tabs({children, buttons}){
	return<>
		<menu>
			{buttons}
		</menu>
		{children}
	</>
}

• 두 개의 slot을 설정하여 메인 내용 슬롯을 children을 통해 관리하고 buttons 슬롯을 buttons 속성을 통해 설정할 수 있음
• button이 메뉴 안에 있고 메뉴 아래에 children이 있음

 

<Tabs buttons={
	<>
		<TabButton
			isSelected={selectedTopice==='components'}
			onClick={()=>handleSelect('components')}> Components </TabButton>
		<TabButton
			isSelected={selectedTopice==='jsx'}
			onClick={()=>handleSelect('jsx')}> jsx </TabButton>
	</>
	}>
	{tabContent}
</Tabs>

{} 안에 특정 JSX코드를 넣어줌

• JSX요소는 정규값으로서 코드에 값처럼 사용될 수 있음
  • buttons={} 안에 TabButton을 넣어줌
• Tabs 컴포넌트를 재사용 할 수 있음.