<aside> 💡

프래그먼트와 포털을 통해 코드를 깔끔하게 작업할 수 있다!

</aside>

• jsx 제한 사항 : 반드시 한 개의 요소만 리턴해야한다.

  • 방법 1: <div> 와 같이 하나의 요소안에 모든 요소를 넣어서 반환한다.

• 의미없는 <div> 의 중첩이 발생할 수 있다.

• 단순히 하나의 Wrapper로 감싸서 리턴해야하기 때문에 의미없는 Wrapper 컴포넌트를 만들어준다.

React.Fragment (Wrapper, <>)

Wrapper.js

const Wrapper = props => {
    return props.children; // children이 포함하고 있는 내용 : 여는 태그와 닫는 태그 사이의 모든 내용 포함
};

export default Wrapper;

• 이와 같이 Wrapper 컴포넌트를 새로 만들어주거나 <> 또는 <React.Fragment> 를 사용할 수 있다.

• Wrapper 또는 <React.Fragment> 와 같은 빈 껍데기를 만들어 주면 위와 같이 감싸주는 <div> 태그가 사라진 것을 볼 수 있다.

<aside> 💡 보통 자체적으로 Wrapper를 만들지는 않고 Fragment 를 이용해서 감싸준다.

</aside>