JSX

JSX

JSX는 React에서 사용하며 Javascript에서 XML을 추가해 확장한 문법입니다.

React는 별도의 파일에 HTML 마크업 언어와 Javascript 로직 언어를 동시에 작성하여 컴포넌트 단위로 분리합니다.

이러한 형태는 공식적인 자바스크립트 문법이 아니므로 브라우저를 실행하기전에 Babel을 이용해 일반 자바스크립트 형태의 코드로 변환됩니다.

---

JSX 문법

• 부모 요소 하나가 감싸는 형태

  가상 DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조를 이루어야 한다는 규칙이 있기 때문입니다.

  function App() {
    return (
      <>
        <div>Hello</div>
        <div>GodDaeHee!</div>
      </>
    );
  }
  

• 자바스크립트 표현식

  JSX 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 사용할 수 있습니다.

  참고 글 : 자바스크립트 표현식

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  
  const user = {
    firstName: "Harper",
    lastName: "Perez",
  };
  
  const element = <h1>Hello, {formatName(user)}!</h1>;
  

• JSX 속성 정의

  속성에 "”를 사용해 문자열 리터럴을 정의할 수 있습니다.

  const element = <a href="https://www.reactjs.org">link </a>;
  

  또한, {}를 사용하여 속성에 자바스크립트 표현식을 삽입할 수도 있습니다.

  const element = <img src={user.avatarUrl}></img>;
  

• 조건부 연산자

  JSX 내부에서 자바스크립트 표현식의 if문 대신 삼항 연산자를 사용합니다.

  물론 JSX 밖에서 if문을 사용할 수 있습니다.

  import React from "react";
  
  // 자바스크립트 표현
  function App() {
    const name = "react";
  
    return (
      <div>
        {name === "react" ? <h1>This is react</h1> : <h2>This isn't react</h2>}
      </div>
    );
  }
  
  export default App;
  

• AND 연산자(&&) 사용

  특정 조건을 만족할 때만 내용을 보여주고 싶을 떄 사용합니다.
  삼항 연산자보다 짧게 구현 가능합니다.

  import React from "react";
  
  // AND 연산자
  function App() {
    const name = "not-react";
    return <div>{name === "react" && <h1>It's correct</h1>}</div>;
  }
  
  export default App;
  

• undefined 렌더링 하지 않기

  React 컴포넌트에서 undefined를 반환하여 렌더링하면 에러가 발생합니다.

  import React from "react";
  import "./App.css";
  
  // undefined를 렌더링 하지 않기
  function App() {
    const name = "undefined";
  
    return name;
  }
  
  export default App;
  

  값이 undefined일 수 있다면 OR 연산자를 통해 에러를 방지합니다.

  import React from "react";
  import "./App.css";
  
  function App() {
    const name = "undefined";
  
    return name || "값이 undefined입니다.";
  }
  
  export default App;
  

• JSX 내부의 undefined

  JSX 내부에서는 undefined를 렌더링해도 괜찮습니다.

  import React from "react";
  import "./App.css";
  
  function App() {
    const name = "undefined";
  
    return <div>{name}</div>;
  }
  
  export default App;