JSX 문법

JSX는 편리한 문법이지만 올바르게 사용하기 위해 규칙을 따라야 합니다.

요소는 감싸져 있어야 한다.

---

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

지난번 hello-react 프로젝트의 src 폴더 안 App.js 파일을 열어보겠습니다.

function App() {

  return (

   

      <h1>Hello React!!</h1>

      <h2>안녕하세요 주녘입니다.</h2>

   

  );

}

export default App;

이러한 형태의 코드는 작동하지 않습니다. 터미널을 열어 웹 브라우저에서 확인해 볼까요?

 

이러한 오류는 요소들이 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것입니다.

이러한 오류 수정은 아래 코드와 같이 작성하면 해결됩니다.

 

function App() {

  return (

    <div>

      <h1>Hello React!!</h1>

      <h2>안녕하세요 주녘입니다.</h2>

    </div>

  );

}

export default App;

요소사이에 <div></div> 태그로 감싸주면 오류가 해결됩니다.

중요한 JSX 규칙 중 하나는 return 이후에는 한 개의 태그로 둘러싸여 있어야 한다는 것입니다.

 

또는 리액트에서 제공하는 Fragment를 사용할 수 있습니다. Fragment는 두 가지 방법으로 사용가능합니다.

 

react에서 Fragment를 import 해서 사용하거나 빈 태그로 감싸면 됩니다.

 

import { Fragment } from "react";

function App() {

  return (

    <fragment>

      <h1>Hello React!!</h1>

      <h2>안녕하세요 주녘입니다.</h2>

    </fragment>

  );

}

 

export default App;

 

 

function App() {

  return (

    < >

      <h1>Hello React!!</h1>

      <h2>안녕하세요 주녘입니다.</h2>

    </ >

  );

}

 

export default App;

 

 

JSX에서의 JS표현

---

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

 

function App() {

  // 변수와 함수를 선언하는 곳

  const name = "주녘";

 

  return (

    <div>

      <h1>Hello {name}!!</h1>

      <h2>안녕하세요 {name}입니다.</h2>

    </div>

  );

}

export default App;

 

JSX에서 if문을 쓰고 싶다면? - 조건부 연산자를 활용!

---

JSX 내부에서 자바스크립트 표현식에서 if문을 사용할 수 없습니다.

if문을 사용하기 위해서는 JSX 밖에서 if문을 사용하여 값을 미리 설정하거나 JSX 내부에서 { } 안에 조건부 연산자를 사용하면 됩니다. 우리가 알고있는 삼항 연산자를 생각하면 됩니다.

 

function App() {

  // 변수와 함수를 선언하는 곳

  const name = "주녘";

  return (

    <div>

      {name === "주녘" ? <h1>주녘입니다.</h1> : <h2>주녘이가 아닙니다.</h2>}

    </div>

  );

}

export default App;

위와 같이 실행하면 결과화면이 주녘입니다. 라고 뜨겠죠?

만약 name의 값이 주녘이 아닌 철수이면 어떻게 될까요? 값을 변경해봅시다.

 

function App() {

  // 변수와 함수를 선언하는 곳

  const name = "철수";

  return (

    <div>

      {name === "주녘" ? <h1>주녘입니다.</h1> : <h2>주녘이가 아닙니다.</h2>}

    </div>

  );

}

export default App;