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

 

🎯 Element 찍어내기

  • 수많은 태그를 하나하나 작성하기는 힘들다 → 함수를 사용하여 자동적으로 생성되도록 만들어준다.

 

paint 함수 3번 찍어 내기

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

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

        const paint = () => (
            <>
                <h1>Hi</h1>
                <h3>Bye</h3>
            </>
        );
        const element = (
            <>
                {paint()} // JSX에다 JS를 주입할 때는 이렇게 표현
                {paint()}
                {paint()}  
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

📝 장점 - 다른 변수들을 받아서 여러 개를 찍어낼 수 있다.

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

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

        const paint = (title, description) => (
            <>
                <h1>{title}</h1>
                <h3>{description}</h3>
            </>
        );
        const element = (
            <>
                {paint('good', "GOOD")}
                {paint('Bad', "bad")}
                {paint("so so", "SO SO")}  
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

📝 리팩토링

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

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

        // Paint 함수는 JSX를 리턴하는 함수이다.
        // {title, description} 이게 props다.
        // html태그와 헷갈리지 말라고 대문자를 작성해야 된다.
        const Paint = ( {title, description} ) => (
            <>
                <h1>{title}</h1>
                <h3>{description}</h3>
            </>
        );

        const element = (
            <>
                <Paint title="Good" description="good" />
                <Paint title="Bad" description="bad" />
                <Paint title="so so" description="SO SO" />
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>
  • Paint 함수는 JSX를 리턴하는 함수이다.
  • { title, description }는 React.createElement의 두 번째 인자인 props다.
  • html의 기존 태그와 헷갈리지 말라고 대문자를 작성해야 된다.

 

📝 children 사용 → 제한 없다!

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

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

        const Paint = ( {title, description, children} ) => (
            <>
                <h1>{title}</h1>
                <h3>{description}</h3>
                {children}
            </>
        );

        const element = (
            <>
                <Paint title="Good" description="good">
                    <h1>Hi</h1>    
                </Paint>
                <Paint title="Bad" description="bad" />
                <Paint title="so so" description="SO SO" />
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>
  • children에는 개수 제한이 없다. <h1>Hi</h1>를 계속 써도 된다.

 

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

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

        const Paint = ( {title, description, children} ) => (
            <>
                <h1>{title}</h1>
                <h3>{description}</h3>
                {children}
            </>
        );

        const Good = () => <h3>Good</h3>;

        const element = (
            <>
                <Paint title="Good" description="good">
                    <Good />   
                    <Good />   
                    <Good />   
                </Paint>

            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

  • 계속해서 자기 자신을 또는 다른 사람을 찍어낼 수 있다.
  • children은 제약 없다. 그냥 여러 개 찍어낼 수 있다.

 

🏷 요약

  • Function -> 재사용 가능한 Element
  • Custom Element -> Upper Case
  • Children 제한 -> 없음
반응형

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

[React] 리랜더링  (0) 2021.09.11
[React] JS와 JSX 섞어 쓰기  (0) 2021.09.11
[React] 멀티 Element 생성하기 :: React.Fragment  (0) 2021.09.11
[React] JSX, Babel, 스프레드 연산자  (0) 2021.09.11
[React] ReactDOM.render  (0) 2021.09.11

티스토리툴바