개발 공부중

[React] JSX 문법 정리 본문

REACT

[React] JSX 문법 정리

개발자 leelee 2023. 2. 22. 02:38

JSX란?

자바스크립트의 JS와 XML의 X를 합친 말로,

자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장이다.

 

 

JSX 문법

HTML과 비슷하지만 다른 특징이 있다.

1. 반드시 부모 요소는 한개의 태그로 감싸져 있어야 한다.
    컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다.

// 잘못된 코드
function App(){
    return(
        <h1>test1</h1>
        <h2>test2</h2>
    )
}

// 올바른 코드
function App(){
    return(
    	<div>
        	<h1>test1</h1>
        	<h2>test2</h2>
        </div>
    )
}

 

2. 자바스크립트 값을 포함시키려면 값 주변을 중괄호로 감싸준다.

    태그 안에 좌중괄호{와 우중괄호}만 붙이면 어디서든 자바스크립트 코드 사용가능하다.
    심지어는 태그에 데이터셋을 참조하는 주소번지도 전달할 수 있다.

import React from 'react';

function App() {
	const name = 'test1';
    return (
    <>
    	<h1>{name}</h1>
        <h2>test</h2>
    </>
  );
}

export default App;

 

3. if 문을 사용할 수 없어서, 삼항연산자를 사용한다.

    <script type="text/babel">
        const rootElement = document.querySelector("#root");
        // 1부터 5까지 출력하는데 홀수는 작게 짝수는 크게 출력하는 예제를 만들어보기
        // 파라미터에 {} 가 있으면 props이다
        const Number2 = ({ number }) => { //1 2 3 4 5 
          return number%2 ===0? <h1>{number}</h1> :<h3>{number}</h3>
        };
        const element = (
          <>
          <Number2 number ={1} />
          <Number2 number ={2} />
          <Number2 number ={3} />
          <Number2 number ={4} />
          <Number2 number ={5} />
          </>
        );
        ReactDOM.createRoot(rootElement).render(element);
    </script>

실행 화면

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

   특정 조건이 true 이면 내용을 보여주고 만족하지 않으면 아예 출력하지 않게 할 수 있다.

  <body>
    <div id="root"></div>
    <script type="text/babel">
        const rootElement = document.querySelector("#root");
        // 1부터 5까지 짝수만 출력하는 예제를 만들어보기
        const Number2 = ({ number }) => { //1 2 3 4 5 
          return(
            <div>
              {number%2 ===0 && <h1>{number} 보여준다</h1>}
            </div>
          )
        };
        const element = (
          <>
          <Number2 number ={1} />
          <Number2 number ={2} />
          <Number2 number ={3} />
          <Number2 number ={4} />
          <Number2 number ={5} />
          </>
        );
        ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>

실행 화면

5. OR 연산자(||)를 사용한 조건부 렌더링

컴포넌트 내부에서 undefined만 반환하면 오류가 난다.

오류를 방지하기 위해 OR연산자를 사용할 수 있다.

import React from 'react'

function App(){
    const boolean = undefined;
    return boolean || 'undefined 입니다'
}

export default App;

 

6. class는 예약어라 className을 사용한다.

  <body>
    <div id ="root"></div>
    <style>
        .title{
            color: steelblue;
        }
    </style>
    <script type="text/babel">
        const rootElement = document.querySelector("#root");
        const subject = "React"
        const 클래스이름 = "title";
        const 사용자정의태그 = <h1 className = {클래스이름}>{subject}</h1>;
        ReactDOM.createRoot(rootElement).render(사용자정의태그);

    </script>
  </body>

실행 화면

참고 사이트

 

Introducing JSX – React

A JavaScript library for building user interfaces

reactjs.org

 

'REACT' 카테고리의 다른 글

[Develop/React] object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 오류해결  (0) 2023.03.23
'REACT' Related Articles more
Comments