[React] {} 중괄호로 자바스크립트 문법 사용하기(JSX)
React에서는 컴포넌트에서 JSX 문법을 사용할 수 있습니다.
{}중괄호를 사용해서 자바스크립트에서 사용한 변수, 메서드 같은 것을 자유롭게 사용 가능합니다.
1. 변수 불러오기
태그 요소안에 변수를 사이에 넣을수 있습니다.
소스 코드
// 1. 변수를 불러온다.
function JsxComponent(){
const text = "숫자";
const num = 2;
return (
<div>
<h3>JSX 예시 1 : {text} {num} </h3> {/* 중괄호를 통해 text, num 불러오기 */}
</div>
)
}
결과
2. 메서드 불러오기
함수를 {}중괄호로 불러 올 수도 있습니다.
소스 코드
// 2. function을 불러온다.
function JsxComponent1(){
const textfunc = function(){
return (
<h3>텍스트 출력 메서드</h3>
)
}
return (
<div>
{textfunc()}
</div>
)
}
function JsxComponent2(){
const alertFunc = function(){
alert('팝업');
}
return (
<div onClick={alertFunc}>
<h3>클릭하면 alert 발생</h3>
</div>
)
}
export {JsxComponent1,JsxComponent2};
결과
