불 필요한 <div> 제거하기 (Fragment)

컴포넌트를 만들고 사용하는 부분에 있어서 불 필요한 div가 많이 발생합니다.

 

세분화된 컴포넌트를 만들어 App.js에서 사용하게 되면 감싸기 위해 사용된 수많은 div를 확인할 수 있게 됩니다.

 

해결방안

const Wrapper = (props) => {
  return props.children;
};

export default Wrapper;

감싸는 컴포넌트를 하나 생성해주었습니다.

해당 컴포넌트로 감싸게 되면 의미 없는 div를 사용하지 않고 컴포넌트를 생성할 수 있습니다.

 

하지만 불 필요한 div를 없애기 위해 만든 컴포넌트는 React에서 제공하기 때문에 직접 만들 필요가 없습니다.

위의 이미지처럼 감싸고 있는 요소에 React.Fragment를 사용해주시면 됩니다.