리액트 children란

리액트에 보면 children이라는 컴포넌트가 있는데 이게 무엇인지 알려줄게

import Footer from "../Footer";
import Header from "../Header";

interface LayoutProps {
  children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

export default Layout;

이런 코드가 있다고 치면,

Layout 컴포넌트 분석

전체 구조

이 코드는 Layout 컴포넌트임. Header와 Footer를 고정으로 두고, 그 사이에 다른 내용을 넣을 수 있게 만든 거임.

┌─────────────┐
│   Header    │ ← 고정
├─────────────┤
│   children  │ ← 페이지마다 바뀌는 내용
├─────────────┤
│   Footer    │ ← 고정
└─────────────┘

1. interface란?

TypeScript에서 "이 데이터의 모양은 이렇게 생겼어!" 라고 정의하는 거임.

interface LayoutProps {
  children: React.ReactNode;
}

"Layout 컴포넌트는 children이라는 props를 받을 건데, 그 타입은 React.ReactNode야!" 라고 미리 선언하는 거임.

왜 쓸까?

• 실수로 잘못된 props를 넣으면 에러를 미리 잡아줌
• 코드 작성할 때 자동완성도 됨

2. children이란?

컴포넌트 사이에 넣는 내용물임.

// 사용할 때

  여기가 children이야!


// Layout 안에서 받을 때
function Layout({ children }) {
  return {children}  // "여기가 children이야!" 가 여기에 들어감
}

실제 사용 예시

// HomePage.jsx

  홈페이지
  환영합니다!


// AboutPage.jsx

  소개
  우리는...

둘 다 Header/Footer는 똑같고, 중간 내용만 바뀌는 거임!

3. React.ReactNode란?

React에서 화면에 보여줄 수 있는 모든 것을 의미함.

포함되는 것들:

// 전부 다 React.ReactNode임!
텍스트           // JSX
"그냥 문자열"              // 문자열
123                       // 숫자
           // 다른 컴포넌트
null                      // null (아무것도 안 보임)
[1, 2]  // 배열

왜 ReactNode를 쓸까?

children은 뭐가 들어올지 모름. 텍스트일 수도, 컴포넌트일 수도, 여러 개일 수도 있으니까 "뭐든지 다 받을 수 있어!" 라고 타입을 정한 거임.

다시 정리하면

interface LayoutProps {           // ① props의 모양 정의
  children: React.ReactNode;      // ② children은 뭐든 들어올 수 있음
}

function Layout({ children }: LayoutProps) {  // ③ 타입 지정하면서 받기
  return (
    <>
      
      {children}      // ④ 받은 children 여기에 넣기
      
    </>
  );
}

핵심 요약

• interface: 데이터 타입 정의
• children: 컴포넌트 사이에 들어가는 내용
• React.ReactNode: React에서 렌더링 가능한 모든 타입