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 컴포넌트를 재사용 할 수 있음.
'Develop > FE' 카테고리의 다른 글
| [React] Redux Thunk, Redux Persist (0) | 2025.05.26 |
|---|---|
| React + PWA + Vite 프로젝트 시작하기 (feat. tailwind) (0) | 2025.04.19 |
| [React] Context (1) | 2024.11.12 |
| [React] Lists and Keys & Forms & Lifting State Up (1) | 2024.10.08 |
| [React] Handling Events & Conditional rendering (1) | 2024.10.03 |