[React] 프래그먼트 작업

리엑트 컴포넌트에서 반환할때 사용되는 JSX코드는 지켜야할 문법적인 규칙이 있다.

JSX 자세히보기 의 내용처럼 리엑트에서는 적용되는 jsx요소는 React객체에서 활용할수 있는 React.createElement()메소드를 이용하여 그 특징에 근거해 한개 이상의 요소를 나란히 적용하지 못하고 왜 루트요소가 필요한지 알아보았다.

그러한 이유로 리엑트에서 jsx코드로 반환을 할때 jsx의 제한사항을 해결할 방법으로 몇가지가 있는데 이중 프래그먼트로 작업하는 부분을 알아보자.

직접 컴포넌트(Wrapper)로 감싸는 방법

사용자 정의 컴포넌트에서 사용되는 모든 컴포넌트에서 jsx코드의 루트요소를 임의로 껍데기(?)역할의 컴포넌트를 사용할 수 있다.

• Wrapper.js

function Wrapper(props) {
  return props.children;
}

export default Wrapper;

위 컴포넌트는 사용되는 컴포넌트안에서 JSX요소의 루트컴포넌트 역할을 수행하며 실직적인 DOM에 아무것도 렌더링 하진 않는다.
그리고 Wrapper컴포넌트 안에 넣는 것들은 사용되는 jsx코드에 직접반환하지 않기 때문에(jsx코드를 사용하지 않는다.) 요소들 끼리 인접해도 좋다.
이 컴포넌트는 props로 받는 children 컨텐츠를 전부 반환해주는 컴포넌트이다.

이렇게 해도 어긋나지 않는 이유는 return문에서는 여전히 props.children 1개만 반환하기 때문이고, 현재 코드에서 children안의 컨텐츠들을 직접반환하지 않기 때문에 괜찮은 것이다.

이렇게해서 div태그를 루트요소로써 활용하지 않았기 때문에 무분별한 div 사용을 막을 수 있다.

리엑트에서 제공하는 React.Fragment

사실 간편하게 리엑트에서 제공되는 기능을 적용해주는게 더 쉽다.
보통은 저렇게 만들지 않고,
React가 제공하는 React.Fragment로 접근하여 감싸 코드를 작성해준다.

return (
    <React.Fragment>
        <h2>hi there!</h2>
        <p>here is workflow!</p>
    </React.Fragment>
);

return (
    <>
        <h2>hi there!</h2>
        <p>here is workflow!</p>
    </>
);

1번 코드는 React를 import해온다면 항상 작동하지만 2번은 빌드 워크플로우가 지원해야 가능하다.
그러나 Wrapper컴포넌트를 만든거와 동일한 기능이 작용된다는 점이 중요할것 같다.

이들도 실제 html요소를 DOM에 렌더링하지않는다.

이로써 리엑트 컴포넌트에서 jsx제한사항에 위배되지않고 의미없는 div태그 soup에 빠지지 않도록 하는 방법에 대해서 알아보았다.