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

 

🎯 JS와 JSX. 섞어 쓰기

  • 같은 컴포넌트를 사용했지만 결과물을 다르게 만들 수 있다.
<body>
    <div id="root"></div>

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

        const Text = ( { text } ) => {
            // text가 대문자로 시작하면 h1, 소문자로 시작하면 h3
            if (text.charAt(0) === text.charAt(0).toUpperCase()) { // JS
                return <h1>{text}</h1> // JSX + JS
            } else {
                return <h3>{text}</h3>
            }
        };

        const element = (
            <>
                <Text text="Text" />
                <Text text="text" />
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

📝 짝수면 h1태그, 홀수면 h3태그

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

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

        function Number( {number} ) {
            return number % 2 === 0 ? <h1>{number}</h1> : <h3>{number}</h3>
        }

        const element = (
            <>
                <Number number={1} />
                <Number number={2} />
                <Number number={3} />
                <Number number={4} />
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

📝 선택된 숫자만

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

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

        function Number({ number, selected }) {
            return selected ? <h1>{number}</h1> : <h3>{number}</h3>
        }

        const element = (
            <>
                <Number number={1} />
                <Number number={2} selected={true}/>
                <Number number={3} />
                <Number number={4} />
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

📝 반복문 - 숫자가 3일 때만

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

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

        function Number({ number, selected }) {
            return selected ? <h1>{number}</h1> : <h3>{number}</h3>
        }

        const element = (
            <>
               {[1,2,3,4,5,6,7,8,9,10].map((number) => (
                   <Number number={number} selected={number === 3} />
               ))}
            </>
        )

        ReactDOM.render(element, rootElement);

    </script>
</body>

 

🏷 요약

  • interpolation → 이미 HTML에서 사용하고 있었다. (html 내 스크립트, 스타일 등 적용)
반응형

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

[React] 리액트 이벤트 핸들러  (0) 2021.09.11
[React] 리랜더링  (0) 2021.09.11
[React] Element 찍어내기  (0) 2021.09.11
[React] 멀티 Element 생성하기 :: React.Fragment  (0) 2021.09.11
[React] JSX, Babel, 스프레드 연산자  (0) 2021.09.11

티스토리툴바