[React.js] JSX에서 javascript 사용법

사실 JSX는 실제로 실행될 때 javascript코드로 바뀌어서 실행된다. 그러면 당연히 JSX에 javascript코드를 넣을 수도 있다.

다음과 같은 코드가 있다고 하자.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <>
    <h1>안녕 리액트!</h1>
  </>,
  document.getElementById('root')
);

여기서 리액트란 단어를 name이라는 javascript 변수로 바꾸려고 한다. 그러면

import ReactDOM from 'react-dom';

const name = "리액트";

ReactDOM.render(
  <>
    <h1>안녕 {name}!</h1>
  </>,
  document.getElementById('root')
);

이렇게 중괄호를 이용해 name이란 javascript변수를 JSX 문법에 사용가능하다. Django에서 템플릿 변수를 사용하는 것과 비슷.

 

사실 이 중괄호엔 변수 뿐만 아니라 javascript로 쓰인 표현식은 모두 사용가능하다. 예를 들어, 문자열의 문자들을 모두 대문자로 만드는 toUpperCase()메소드도 중괄호 안에서 사용가능하다.

import ReactDOM from 'react-dom';

const name = "reactplease";

ReactDOM.render(
  <>
    <h1>안녕 {name.toUpperCase()}!</h1>
  </>,
  document.getElementById('root')
);

React에선 JSX문법을 사용하므로, 이벤트 핸들러를 등록할 때 addEventListener보단 요소의 속성값으로 이벤트 핸들러를 등록할 때가 많다. 이렇게 특정 태그의 속성값으로도 중괄호를 활용해 javascript를 사용가능하다.

import ReactDOM from 'react-dom';

const name = "reactplease";
function func(){
  alert("s");
}

ReactDOM.render(
  <>
    <h1>안녕 {name.toUpperCase()}!</h1>
    <button onClick={func}>버튼</button>
  </>,
  document.getElementById('root')
);

참고로 중괄호안에서는 javascript 표현식만 사용가능하므로, if문, for문, 함수선언등과 같은 것은 할 수 없다.