[React] JSX 란?

참고

• https://ko.reactjs.org/docs/introducing-jsx.html

JSX란?

• React 에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들입니다.
• React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.
• React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다.

JSX에 표현식 포함하기

• 아래 예시에서는 name 이라는 변수를 선언한 후, 중괄호로 감싸 JSX 안에 사용하였습니다.

const name = "BeomBeomJoJo";
const element = <h1>Hello, {name}</h1>

• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.
• 예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식입니다.
• 아래 예시에서는 JavaScript 함수 호출의 결과인 formatName(user)을

  엘리먼트에 포함했습니다.

import logo from "./logo.svg";
import "./App.css";

function formatName(user) {
    return user.firstName + ` ` + user.lastName;
}

const user = {
    firstName: "BeomBeom",
    lastName: "JoJo",
};

function App() {
    return (
        <div className="App">
            <h1>Hello, {formatName(user)}</h1>
        </div>
    );
}

export default App;

JSX도 표현식 입니다.

• 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.
• 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

import logo from "./logo.svg";
import "./App.css";

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

function formatName(user) {
    return user.firstName + ` ` + user.lastName;
}

const user = {
    firstName: "BeomBeom",
    lastName: "JoJo",
};

function App() {
    return (
        <div className="App">
            <h1>{getGreeting(user)}</h1>
        </div>
    );
}

export default App;

JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

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

• 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

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

• 어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 됩니다.