React

강의: 한 번에 끝내는 React의 모든 것 초격차 패키지 Online
Part 1. React 기초
03. JSX과 Babel , JSX 다루기
04. 멀티 Element 생성하기

JSX

: React.createElement를 표현한 식.
다룰 때, spread 연산자를 사용한다.

  • JSX를 code sandbox에 넣으려면 Babel이 필요함.
  • Babel : JS 컴파일러(언어 해석기: 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램)

unpkg

: 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.../>에서 divReact.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>
profile
프론트엔드 개발 입문자입니다. 오타, 틀린 내용 피드백 환영합니다.

0개의 댓글