[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};

 

결과