📘 [Recat] React 핵심 - 심화단계

2025년 04월 05일 in Dev / Frontend on #React #Web

[Recat] React 핵심 - 심화단계

 Fragments(프래그먼트) 사용법

다음 코드는 오류 발생

 return (
  <Header />
  <main>...</main>
);

두 개의 형제 요소를 반환하려 하기 때문에 JSX 에러 발생
→ JSX expressions must have one parent element

• JSX는 결국 React.createElement(...) 호출로 변환됨
• 함수가 두 개 이상의 값을 반환할 수 없듯이,
  JSX도 하나의 요소만 반환 가능해야 함

해결책 1: 불필요한 <div>로 감싸기

return (
  <div>
    <Header />
    <main>...</main>
  </div>
);

• 오류는 해결되지만, 불필요한 div가 DOM에 생김

해결책 2: React.Fragment 사용

import { Fragment } from 'react';

return (
  <Fragment>
    <Header />
    <main>...</main>
  </Fragment>
);

• 실제로 렌더링되지 않는 가상의 요소
• DOM에 아무것도 남기지 않음

해결책 3: 축약 문법 <> ... </>

return (
  <>
    <Header />
    <main>...</main>
  </>
);

• Fragment의 축약형
• 대부분의 최신 React 프로젝트에서 사용 가능
• 가장 깔끔하고 간편한 방법

감싸진 요소에 Props(속성) 전달하기

function Wrapper({ title, children, ...props }) {
  return <section {...props}>...</section>;
}

• title, children은 직접 꺼내 사용
• 나머지 모든 props는 props 객체에 자동 수집됨
• 수집된 props는 <section>에 ...props로 전달됨 👉 효과: <Wrapper id="examples" className="my-section" /> 등의 추가 props도 자동 전달됨

function TabButton({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

• 외부에서 전달된 onClick, className, type 등 모든 props를 자동 전달
• 내부에서는 별도로 prop을 꺼내지 않아도 됨
• 이 패턴은 내장 요소에 그대로 전달할 속성이 많을 때 특히 유용

컴포넌트 타입 동적으로 설정하기

동적으로 컴포넌트나 HTML 태그를 props로 전달할 수 있다

예: <Tabs buttonsContainer="menu" />

• buttonsContainer는 문자열 "menu"로, HTML 태그(<menu>)로 해석됨. 내장 HTML 요소 또는: <Tabs buttonsContainer={Section} />
• 커스텀 컴포넌트 Section을 전달함. 커스텀 컴포넌트

Tabs 컴포넌트 내부에서 받은 값을 JSX 태그로 사용하기

function Tabs({ buttonsContainer }) {
  const ButtonsContainer = buttonsContainer; // 중요: 대문자로 시작
  return (
    <ButtonsContainer>
      {/* 버튼들 */}
    </ButtonsContainer>
  );
}

• 리액트는 대문자로 시작하는 JSX 태그를 커스텀 컴포넌트로 인식함
• 전달받은 buttonsContainer 값에 따라 HTML 태그나 컴포넌트를 동적으로 생성 가능

내장 HTML 태그는 문자열로 전달, 커스텀 컴포넌트는 함수 참조로 전달 - buttonsContainer="menu" → <menu>로 렌더링 - buttonsContainer={Section} → <Section>으로 렌더링

이미지 저장소는 public/ VS assets/

• public/ 폴더 사용 시점
  • HTML에서 직접 참조해야 하는 이미지
  • 외부에서 URL로 직접 접근이 필요한 리소스
  • 빌드와 무관하게 정적 유지돼야 할 파일
• src/assets/ 폴더 사용 시점
  • 컴포넌트에서 import하여 사용하는 이미지
  • 리액트 앱의 구성요소와 함께 번들링되어야 할 리소스
  • 빌드 과정에서 최적화가 필요한 리소스

📑 Reference

---

• 【한글자막】 React 완벽 가이드 2025 with React Router & Redux | Udemy
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---