(6)React_초급_JSX 문법3 : JSX코드에 JS변수, 함수하기

● render() 매개인자 내의 JSX 코드에서 JavaScript 변수를 사용하기

 

○ Ex1_ 태그 내 textContent에 JS 변수 사용 사례

 

import ReactDOM from 'react-dom/client';

const name = '김형준';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	  <>
    	<h1>나는 {name}입니다.</h1>
    </>
);

 

○ Ex2_ 태그 내 textContent에 JS 변수의 프로퍼티메소드 사용 사례

import ReactDOM from 'react-dom/client';

const name = 'Cristiano Ronaldo';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	  <>
    	<h1>나는 {name.toUpperCase()}입니다.</h1>
    </>
);

○ Ex3_ 태그 내 textContent에 JS 변수 여려개 연산된 변수 사용

import ReactDOM from 'react-dom/client';

const name = 'Cristiano Ronaldo';

const nickname = '아이패두'

const fullname = name + nickname;


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	  <>
    	<h1>나는 {fullname}입니다.</h1>
    </>
);

○ Ex4_ 태그 내 textContent에 JS 변수 사용 + img 태그의 src 속성에 js 변수 사용

import ReactDOM from 'react-dom/client';

const name = 'Cristiano Ronaldo';

const nickname = '아이패두'

const fullname = name + nickname;


const root = ReactDOM.createRoot(document.getElementById('root'));

const imgUrl = 'https://img.khan.co.kr/news/2023/12/31/l_2024010101000021800103831.jpg'

root.render(
	  <>
    	<h1>나는 {fullname}입니다.</h1>
      <img src={imgUrl} alt='호날두 병신 사진'></img>
    </>
);

○ Ex5_ button 태그 onClick 속성 <= js 변수(function) 메소드 대입 사례

주의 : {function 이름 ()} 로 대입한다.

import ReactDOM from 'react-dom/client';

const name = 'Cristiano Ronaldo';

const nickname = '아이패두'

const fullname = name + nickname;


const root = ReactDOM.createRoot(document.getElementById('root'));

const imgUrl = 'https://img.khan.co.kr/news/2023/12/31/l_2024010101000021800103831.jpg'

function Messi(){
  alert('메시가 호날두보다 낫다');
}

root.render(
	  <>
    	<h1>나는 {fullname}입니다.</h1>
      <img src={imgUrl} alt='호날두 병신 사진'></img>
      <br></br>
      <button type='button' onClick={Messi}> 버튼</button>
    </>
);