outlet chlidren

🤔 질문: children vs <Outlet /> 차이가 뭔가요?

둘 다 **“다른 컴포넌트를 품어준다(렌더링한다)“**는 점에서는 같지만, **“누가 내용을 결정하는가?”**가 다릅니다.

1. children (AuthLayout) = “액자” 🖼️

• 방식: 직접 끼워 넣기 (Component Composition)

• 주체: **부모 페이지(SigninPage)**가 결정함.

• 설명: SigninPage 안에서 <AuthLayout>을 쓰면서, 그 사이에 폼을 끼워 넣었죠?

  TypeScript

  // SigninPage가 직접 말함: "AuthLayout 액자 안에 이 <form>을 넣어줘!"
  <AuthLayout>
     <form>...</form> 
  </AuthLayout>
  

• 용도: 재사용 가능한 UI 껍데기(모달, 카드, 레이아웃 등)를 만들 때 씁니다.

2. <Outlet /> (MainLayout) = “콘센트/구멍” 🔌

• 방식: 라우팅에 의한 주입 (Router Outlet)

• 주체: **URL(주소창)**과 **App.tsx(라우터)**가 결정함.

• 설명: MainLayout 코드를 보면 그 안에 뭐가 들어갈지 전혀 모릅니다. 그냥 구멍(Outlet)만 뚫려 있죠.

  TypeScript

  // MainLayout은 모름: "난 그냥 구멍만 뚫어놓을게. URL에 맞는 애가 와서 꽂히겠지."
  <div className="content">
     <Outlet /> 
  </div>
  

  URL이 /이면 MainPage가 꽂히고, /interview면 InterviewPage가 꽂히는 식입니다.

• 용도: 페이지 전체의 구조(헤더, 사이드바 고정)를 잡고, 내용물만 갈아 끼울 때 씁니다.

요약:

• children: 코드를 짜는 내가 “이 안에 이거 넣어!” 하고 직접 넣는 것.

• <Outlet />: URL 주소에 따라 자동으로 바뀌는 화면이 들어오는 구멍.