글 작성자: 망고좋아
반응형

 

🎯 React.Fragment

  • 멀티 Element 생성할 때 사용

 

📝 h태그를 리액트로 변환해보기

<h1>Hi</h1>
<h3>Bye</h3>
<h5>Children</h5>

 

root에 div로 h1,h3 ,h5를 감싸서 넣어 주기

<body>
    <div id="root">
    </div>

    <script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <div
                className="box"
                children={[
                    React.createElement("h1", null, "Hi"),
                    React.createElement("h3", null, "Bye"),
                    React.createElement("h5", null, "Children")
                ]}
            />
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>
</body>
  • 위와 같이 리액트는 하나의 박스에 감싸서 여러 태그를 묶어서 넣어주는데 감싸지 않고 넣어주는 방법을 없을까? → 리액트는 다 계획이 있다.

 

📝 React.Fragment

  • React.Fragment는 부모로서 감싸주는 역할만 수행한다.
  • 그리고 실제 html에 넣어줄 때는 쏙 빠진다.
<body>
    <div id="root">
    </div>

    <script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <React.Fragment
                className="box"
                children={[
                    React.createElement("h1", null, "Hi"),
                    React.createElement("h3", null, "Bye"),
                    React.createElement("h5", null, "Children")
                ]}
            />
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>
</body>

 

JSX 문법으로 교체

<body>
    <div id="root">
    </div>

    <script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <React.Fragment
                children={[
                    <h1>Hi</h1>,
                    <h3>Bye</h3>,
                    <h5>Children</h5>
                ]}
            />
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>
</body>

 

리팩토링1

<body>
    <div id="root">
    </div>

    <script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <React.Fragment 
                children={[<h1>Hi</h1>, <h3>Bye</h3>, <h5>Children</h5>]}
            ></React.Fragment>
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>
</body>

 

리팩토링2 - 좀 더 html스러운

<script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <React.Fragment >
                <h1>Hi</h1>
                <h3>Bye</h3>
                <h5>Children</h5>
            </React.Fragment >
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>

 

항상 Fragment 쓰기 귀찮다 ⇒ <> 사용

<script type="text/babel">
        const rootElement = document.getElementById("root");

        // children에는 여러개를 넣을 수 있다.
        const element = (
            <>
                <h1>Hi</h1>
                <h3>Bye</h3>
                <h5>Children</h5>
            </>
        );
        ReactDOM.render(element, rootElement); // (주입할 대상, root)

    </script>

 

🏷 요약

  • 여러 개의 태그를 생성하고 넣어 주기 위해서는 하나로 묶어주는 Fragment를 사용!
반응형

'프로그래밍 > React' 카테고리의 다른 글

[React] JS와 JSX 섞어 쓰기  (0) 2021.09.11
[React] Element 찍어내기  (0) 2021.09.11
[React] JSX, Babel, 스프레드 연산자  (0) 2021.09.11
[React] ReactDOM.render  (0) 2021.09.11
[React] React 엘리먼트 생성하기 :: createElement()  (0) 2021.09.11

티스토리툴바