React : 컴포넌트의 재사용 with children - Wrap Component (확장하기)

컴포넌트를 재사용할 때, 

특정 부분을 제외하거나 추가해서 재사용하고 싶을 때가 있다.

그 때 유용하게 쓸 수 있는 방법.

 

컨테이너 처럼 배경을 지정하고, 안의 내용에 원하는 요소를 쉽게 집어 넣는 것. 

 

import React from "react";

const AppWrap = () => {
  return (
    <div>
      <Nav>  // <-- Nav 컴포넌트
        <span>Nav컴포넌트 안에 있는 내용이 children에 들어가는 것</span>
      </Nav>
    </div>
  );
};

export default AppWrap;

const Nav = ({ children }) => {
  return (
    <>
      <div style={{backgrondColor : "blue" }}>{children}</div>
      
    </>
  );
};

 

배경으로 쓸 요소를 컴포넌트로 지정하고

그 안에 들어갈 내용을 wrapComponent를 이용해서 children으로 전달하는 방식으로 활용할 수 있다.