Framework/React

[React] JSX와 자바스크립트 표현식

JSX란?

리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다.

이 함수의 반환값은 HTML 값입니다.

이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다.

JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼

많은 리액트 개발자가 사용합니다.

JSX와 자바스크립트 표현식

JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다.

Body.js

import React from "react";

function Body(){
    const name = 'react'
    return (
        <div>
            <h1>body</h1>
            <h2>{name}</h2>
        </div>
    );
}
export default Body;

App.js

import React from "react";
import Body from "./component/Body";

function App() {
  return (
    <div className="App">
      <Body></Body>
    </div>
  );
}

export default App;

이 때 자바스크립트 표현식을 나타내기 위하여 { } 중괄호를 이용합니다.

산술 표현식, 문자열 표현식, 논리값 표현식 등 여러 표현식을 사용할 수 있습니다.

function Body(){
    const name = 'react'
    const num1 = 10;
    const num2 = 20;
    const str1 = 'hello';
    const str2 = 'world';
    const b1 = true;
    const b2 = false;
    return (
        <div>
            <h1>body</h1>
            <h2>{name}</h2>
            <h2>{num1 + num2}</h2>
            <h2>{str1 + str2}</h2>
            <h2>{b1 && b2}</h2>
        </div>
    );
}

이 때 논리값은 페이지에 렌더링 되지 않기 때문에 문자열로 형 변환을 해주어야 합니다.

<h2>{String(b1 && b2)}</h2>

하지만 JSX문법에서 원시 자료형인 숫자, 문자열, 불리언, null, undefined를 제외한 값을 사용하면 오류가 발생합니다.

예를들어 object는 페이지에 렌더링할 수 없습니다.

JSX문법에서 지켜야 할 것들

닫힘 규칙: JSX의 모든 태그는 여는 태그가 있으면 반드시 닫는 태그도 존재해야 합니다.

// 잘못된 예
function Body(){
    return (
        <div>
            <h1>body 
        </div>
    );
}

h1이 여는 태그만 존재하고, 닫는 태그가 존재하지 않습니다.

최상위 태그 규칙: JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸야 합니다.

// 잘못된 예
function Body(){
    return (
        <div>Hello</div>
        <div>World</div>
    );
}

return문 안에 최상위 태그가 존재하지 않아 오류가 발생합니다.

HTML 태그를 최상위 태그로 사용하지 않으려면 <React.Fragment> 태그를 사용하면 됩니다.

function Body(){
    return (
    	<React.Fragment>
            <div>Hello</div>
            <div>World</div>
       </React.Fragment>
    );
}

조건부 렌더링

삼항 연산자를 이용한 조건부 렌더링

if 조건문은 표현식이 아니기 때문에 JSX와 함께 사용할 수 없지만,

삼항 연산자는 표현식이기 때문에 조건에 따라 다른 값을 렌더링 할 수 있습니다.

function Body(){
    const num = 20;
    return (
        <div>
            <h1>body</h1>
            <h2>{num % 20 == 0 ? '짝수' : '홀수'}</h2>
        </div>
    );
}

조건문을 이용한 조건부 렌더링

하지만 반드시 if 조건문을 사용해야 하는 경우 다음과 같이 사용할 수 있습니다.

function Body(){
    const num = 20;
    if (num % 2 == 0) {
        return (
            <div>
                <h1>body</h1>
                <h2>짝수</h2>
            </div>
        );
    } else {
        return (
            <div>
                <h1>body</h1>
                <h2>홀수</h2>
            </div>
        );
    }
}

JSX 스타일링

JSX로 리액트 컴포넌트를 스타일링 할 수 있습니다.

CSS와 같은 스타일 규칙을 이용해 요소의 크기, 색상 등을 바꿀 수 있습니다.

인라인 스타일링

HTML의 style 속성을 이용하여 직접 스타일을 정의할 수 있습니다.

function Body(){
    return (
        <div style={{backgroundColor: 'red', color: 'white'}}>
            <h1>body</h1>
        </div>
    );
}

JSX의 인라인 스타일링은 style={{ 스타일 규칙 }} 형태로 작성됩니다.

또한 CSS에서 사용하는 스네이크 케이스 표기법 대신 카멜 케이스로 작성합니다.

스타일 파일 분리

CSS 파일을 만들고 이를 불러와서 사용할 수 있습니다.

Body.css

.body {
    background-color: aqua;
    color: aliceblue;
}

Body.js

import React from "react";
import "./Body.css"
function Body(){
    return (
        <div className="body">
            <h1>body</h1>
        </div>
    );
}
export default Body;

CSS파일은 import문으로 경로만 명시하면 불러올 수 있습니다.

JSX에서는 HTML문법과 달리 요소의 이름을 지정할 때 class 선택자가 아닌, className을 사용합니다.

'Framework > React' 카테고리의 다른 글

[React] 로그인 후 유저 정보를 Redux에 저장하기 (TypeScript) (0)	2024.04.10
[React] 리덕스 알아보기 (0)	2024.04.06
[React][Axios] CORS에러 발생 이유와 proxy를 통한 해결 (0)	2023.10.16
[React] npm 으로 yarn 설치 & yarn으로 react 설치 (0)	2023.07.28
[React] 리액트 앱 생성하고 실행하기 (0)	2023.05.20

Contents

새소식

인기 검색어