JSX

html, css, javascript가 각각의 문법이 있듯이 react도 리액트만의 문법인 JSX문법을 사용합니다.

React 공식문서를 확인하면서 함께 공부를 하는 것을 권장드립니다.

JSX문법 사용 비교

JSX문법을 사용한 경우

return {
  <div 
  	onClick= {() => setFollowing(!following)}
    style={ following ? followingBtnStyle : followBtnStyle }
  >
    {following ? "following" : "Follow"}
  </div>
}

JSX문법을 사용하지 않은 경우

return React.createElement("div",
  {
  onClick: () => setFollowing(!following),
  style: following ? followingBtnStyle : followBtnStyle
  },
   following ? "following" : "Follow");
}

현재 div태그를 하나 만들고 있음에도 JSX문법을 사용한 경우가 훨씬 가독성이 높은 것을 확인할 수 있습니다. 따라서 대부분은 JSX문법을 사용해 작성을 하게 됩니다.

또한 이렇게 작성된 JSX문법은 babel을 통해 자바스크립트로 변환해줍니다.

JSX란?

• 자바스크립트를 확장한 문법

JSX 문법 실습

1. JSX에 표현식 포함하기 - 문자

JSX안에서 표현식을 사용하려면 {}로 감싸주어야합니다.

function App() {
  const message = "Learn React"
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          Yahoo !!!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {message}  //이부분 체크
        </a>
      </header>
    </div>

2. JSX에 표현식 포함하기 - 함수

또한 함수 역시 표현식이기 때문에 함수를 사용할 수 있습니다.

function App() {
  const getGreetingMessage = (name) => {
    return `Hello, ${name}! Learn React`
  }
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          Yahoo !!!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {getGreetingMessage("0seo8")}
        </a>
      </header>
    </div>
  );
}

3. JSX도 표현식입니다

JSX 안에 표현식을 넣을 수 있지만 JSX자체도 표현식입니다. 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

function App() {
  const getGreetingMessage = (name) => {
    if(name === '0seo8')  return `Hello, ${name}! Learn React`
    return `Welcome, ${name}!`
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          Yahoo !!!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {getGreetingMessage("zeroBase")}
        </a>
      </header>
    </div>
  );
}

JSX속성 정의

JSX가 DOM요소를 리턴할 떄는 기본적으로 요소가 가지고 있던 표준 속성들을 전부 사용을 할 수 있습니다.

//어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다
const element = <a href="https://www.reactjs.org"> link </a>;

//중괄호를 사용해 어트리뷰트에 JS표현식을 삽입할 수도 있습니다
const element = <img src={user.avatarUrl}></img>;

경고
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.
(class와 for는 예약어이기 때문에 className과 htmlFor으로 사용합니다.)

      <input type="checkbox" name="agreement" id="agreement-el"></input>
      <label htmlFor='agreement-el'></label>

JSX 자식 정의

태그가 비어있다면 />를 이용해 닫아줘야합니다.

const element = <img src={user.avatarUrl} />;
<p class="aaa" />

또한 JSX태그는 자식을 포함할 수 있습니다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);