📌목표

공통적으로 쓰이는 레이아웃 ex. 로그인, 로그아웃의
로고이미지,타이틀,서브타이틀의 공통레이아웃 파일을 만든후
로그인과,로그아웃의 컨텐츠를 담는 컴포넌트를 넣을수있게 props전달

구조도

LoginLayout.js

• 동적으로 바꿀수있게 title subtitle 변수로 지정하여 props값 전달
• 컨텐츠 컴포넌트를 넣을수있게 children으로 변수지정후 props전달

APP.js

컨텐츠의 내용을 담을 수있는 공간을 children 으로 전달받았기 때문에
children의 자리에 <component />의 형식으로 넣어주면 된다.

이때, 전달받은 content를 제외한 props들은 따로 전달받은 함수를 불러와
동적으로 변할 값들을 지정해줘야 한다.

💡 children

children은 props을 전달하면, 따로 전달받은 함수명(children)을 지정할 필요 없이
공통컴포넌트의 태그 사이에 컨텐츠내용을 받아서 렌더링할 수 있다.

<commonLayout> //공통레이아웃
   <contentComponent /> //컨텐츠컴포넌트
</commonLayout>

     <Route
        path="/join"
        element={
        
        <LoginLayout
          title="회원가입"
          subtitle="서브타이틀">
          <JoinPage />
       </LoginLayout>}/>
       
      <Route />