[React] jsx 사용방법

JSX

JavaScript Extension, 자바스립트를 확장한 문법이다.(HTML이 아니다.) 리액트에서 컴포넌트 구조를 작성하면서 HtML 대신 jsx로 UI를 표현한다고 생각하면 된다. vue에서는 template태그에 직접 HTML 문법을 사용했었는데 동일한 역할이다. 확장자는 jsx로 사용할 수 있으나 js로 사용해도 자동 변환이 되기 때문에 어느 것으로 해도 큰 상관은 없다.

기본 문법

스타일 적용하기

className
jsx에서는 스타일을 적용하기 위한 class는 자바스크립트 예약어라 className으로 대체한다.

const AppFooter = () => {
  return <footer className="red">Footer</footer>;
};

InlineStyle
기존 방식대로 클래스나 id를 붙여 css를 적용하는 방법 외에도, 스크립트 자체에서 스타일을 적용시킬 수 있다. 객체 형태로 css을 작성하고, 점 표기법으로 해당 태그에 적용시킨다.

const style = {
  green: {
    backgroundColor: 'green'
  }
};

const AppFooter = () => {
  return <footer style={style.green}>Footer</footer>;
};

표현식

중괄호 문법으로 jsx 내부에 변수로 사용할 수 있다. (ES6의 템플릿 문법과 상당히 유사하다.)
문자열이나 숫자를 그대로 나타낼 수 있고, 반환 값이 있는 함수를 사용해도된다.

const myName = 'jiny';
const today = function () {
  return new Date().toISOString();
};

function App() {
  return (
    <div className="App">
      <AppHeader />
      <header className="App-header">
        <h2>{myName}</h2>
        <p>{today()}</p>
      </header>
      <AppFooter />
    </div>
  );
}

이벤트 바인딩

요소에 이벤트를 bind하려면 중괄호 내부에 해당 함수를 기입한다.

function App() {
  const noti = () => {
    return alert('test');
  };
  return (
    <div className="App">
      <AppHeader />
      <header className="App-header">
        <button onClick={noti}>클릭</button>
      </header>
      <AppFooter />
    </div>
  );
}

특정 상태에 따라 화면 표시하기

보통 특정 상태에 따라 화면 Ui를 다르게 표시할 때 많이 사용한다.

function App() {
		let state = false;

		const toggleState = () => {
			state = !state;
		}

    return (
        <div className="App">
            <AppHeader />
            <header className="App-header">
				<button onClick={toggleState}>show/hide</button>
            </header>
				<div className="content">{state ? <></> : <div>hello</div></div>
            <AppFooter />
        </div>
    );
}

참고자료

한입 크기로 잘라 먹는 리액트(React.js) - React 기초
React 공식문서 - JSX