강의: 한 번에 끝내는 React의 모든 것 초격차 패키지 Online
Part 1. React 기초
03. JSX과 Babel , JSX 다루기
04. 멀티 Element 생성하기
: React.createElement를 표현한 식.
다룰 때, spread 연산자를 사용한다.
: npm 환경에서 쓰일 수 있음.
❗unpkg(babel용)을 script에 써도 동작하지 않음. 왜냐하면 JS가 읽을 스크립트랑 Babel이 읽을 스크립트랑 다름.
➜ 해석(컴파일)할 수 있도록 type="text/babel"
스크립트를 넣어주자.
<script src="https://unpkg.com/@babel/~~~"></script> <script type="text/babel"></script>
이렇게 해보자 #1
<script type="text/babel"> const rootElement = document.getElementById("root"); const element = <div className="box" children={[ React.createElement("h1", null,"Hi"), React.createElement("h2", null,"there,") React.createElement("h3", null,"good afternoon!") ]} /> ); ReactDOM.render(element, rootElement); </script>
위의 <div.../>
에서 div
를 React.Fragment
로 바꿔 넣어주기(부모로써 감싸주는 역할만 함)
그럴 경우 아래처럼 써도 됨.
이렇게 해보자 #2
<script type="text/babel"> const rootElement = document.getElementById("root"); const element = <React.Fragment> children={[<h1>Hi</h1>, <h2>there,</h2>, <h3>good afternoon!</h3>]} </React.Fragment> ); ReactDOM.render(element, rootElement); </script>
React.Fragment (기호<></>
)를 써서 더욱 간략화 한 제 3의 방법도 있음.
좀 더 HTML처럼 보이지만 계속 JSX를 활용한 것!
이렇게 해보자 #3
<script type="text/babel"> const rootElement = document.getElementById("root"); const element = <> <h1>Hi</h1> <h2>there,</h2> <h3>good afternoon!</h3> </> ); ReactDOM.render(element, rootElement); </script>