[REACT] 리액트 JSX 태그 내부에 변수 넣기(React JSX in InnerTag)

IT•개발 끄적/React

[REACT] 리액트 JSX 태그 내부에 변수 넣기(React JSX in InnerTag)

소다맛사탕 2021. 5. 13. 21:49

안녕하세요. 소다맛사탕 입니다.

리액트는 템플릿처럼 사용할 수 있는데 이번 포스팅에선 JSX 태그 내부에 변수를 넣는 방법에 대해 알아 보겠습니다.

JSX로 HTML 태그를 작성할 때 변수와 함수를 태그 내부에 사용할 수 있는데.

이를 테면... 이와 같습니다.

<tag> {value} </tag>

function 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<title>0513test1</title>
</head>
<body>
<div id="div01"></div>
<div id="div02"></div>
<!-- 
	HTML안에 리액트 문법을 쓸 수 있게
  	스크립트 정의 
-->
<script type="text/babel">
	const headStr = "안녕하세요?"
	const subStr = "반가워요"
	const subStr2 = 12345

	// HTML 태그 내부에 변수 값 넣기
	const msg = <h1>{headStr}</h1>
	const subMsg = <h2>{subStr} : {subStr2}</h2>
	
	// render()
	const elm01 = document.getElementById("div01")
	const elm02 = document.getElementById("div02")
	ReactDOM.render(msg, elm01)
	ReactDOM.render(subMsg, elm02)
</script>
</body>
</html>

HTML 태그 내부에 자유롭게 변수와 상수를 넣는 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<title>0513test2</title>
</head>
<body>
<div id="div01"></div>
<!-- 
	HTML안에 리액트 문법을 쓸 수 있게
  	스크립트 정의 
-->
<script type="text/babel">
	const divVal = "안녕하세요?."
	const urlVal = "http://www.naver.com"

	// JSX 요소 정의
	const msg =
		<div>
			<h1>{divVal}</h1>
			<p><a href={urlVal}>네이버</a></p>
		</div>
	
	// render()
	const elm = document.getElementById("div01")
	ReactDOM.render(msg, elm)
</script>
</body>
</html>

JSX로 속성 값을 작성할 때는 큰따옴표가 아니라 중괄호를 사용하면 됩니다.

a태그 요소의 href에 url을 집어넣게 되면 해당 url로 이동하는걸 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<title>0513test3</title>
</head>
<body>
<div id="div01"></div>
<!-- 
	HTML안에 리액트 문법을 쓸 수 있게
  	스크립트 정의 
-->
<script type="text/babel">
	// 리액트로 DOM 내용 변경
	ReactDOM.render(
		fncDom(),
		document.getElementById('div01')
	);
	
	// function 작성
	function fncDom() {
		return (
			<div>
				<h1>안녕하세요?</h1>
				<h2>function 테스트</h2>
			</div>
		)
	}
</script>
</body>
</html>

다음은 함수를 선언하여 HTML 내부를 변경하는법 입니다.

※ 주의 사항(JSX를 사용시 발생하는 오류)

// 오류1
function fncDom() {
	return 
		<div>
			<h1>안녕하세요?</h1>
			<h2>function 테스트</h2>
		</div>
}
// HTML 태그를 제대로 인식하지 못하는 오류.
// return을 소괄호로 감싸야 합니다.

// 오류2
function fncDom() {
	return (
		<div>
			<h1>안녕하세요?</h1>
			<h2>function 테스트</h2>
		</div>
		<div>
			<h1>안녕하세요?</h1>
			<h2>function 테스트</h2>
		</div>
	)
}
// 여러 개의 DOM 요소 생성시 오류.
// 한 return 안에 여러개의 div 요소를 생성시 오류.
// HTML 태그를 연속적으로 작성할 수 없습니다.

예시를 통해 HTML 태그 내부를 변경하는 방법에 대해 알아보았습니다.

더 자세한 내용과 방법은 다음 포스팅에서 다뤄 보겠습니다.

저작자표시