1-4) [리액트 기초] JSX란? JSX 문법

// src/components/Body.js

import './Body.css';

const Body = () => {
  const numA = 1;
  const numB = 2;
  const strA = 'Hello';
  const strB = 'World';
  const boolA = true;
  const boolB = false;
  const objA = { a: 1, b: 2, c: 3 };
  return (
    <div className="body">
      <h1>Body</h1>
      <h2>{numA} + {numB} = {numA + numB}</h2>
      <h2>{strA} + {strB} = {strA + strB}</h2>
      <h2>{ (boolA || boolB) ? '참입니다.' : '거짓입니다.'}</h2>
      <h2> {objA.a} :: {JSON.stringify(objA)} </h2>

    </div>
  );
}

export default Body;

JSX 란?

 

한마디로 정의하면 리액트는 자바스크립트와 HTML 태그를 섞어서 사용하는 문법이면서, 확장자 이다.

JSX는 결국 자바스크립트의 확장된 문법을 칭한다.

 

실제로 리액트 공식 문서를 들어가보면 여러 예시들을 볼 수 있습니다.

 

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

JSX 소개 – React

 

 

// src/components/Body.js

const Body = () => {
  const numA = 1;
  const numB = 2;
  const strA = 'Hello';
  const strB = 'World';
  const boolA = true;
  const boolB = false;
  const objA = { a: 1, b: 2, c: 3 };
  return (
    <div>
      <h1>Body</h1>
      <h2>{numA} + {numB} = {numA + numB}</h2>
      <h2>{strA} + {strB} = {strA + strB}</h2>
      <h2>{ (boolA || boolB) ? '참입니다.' : '거짓입니다.'}</h2>
      <h2> {objA.a} :: {JSON.stringify(objA)} </h2>
    </div>
  );
}

export default Body;

 

 

 

 

 

위 처럼 number , string, boolean, object 타입을 모두 선언해보고 jsx 문법으로 값을 가져오는 예시다.

 

만약 {objA} 를 그대로 jsx에서 가져오려고하면 어떻게 될까?

 

 

 

 

 

콘솔에 찍힌 에러를 살펴보면 Object are not valid as a React Child" 메세지 나오는데, 

객체 자료형이나거나 배열인 경우에 값을 그대로 사용하면 아래와 같이 오류가 발생한다.

 

객체 내부에 존재하는 값을 직접 렌더링 하도록 프로퍼티로 접근해서 값을 가져와야 한다.

 

위 예시처럼 {objA.a} 처럼 말이다.

 

 

JSX 문법에서 지켜야 할 요소

닫힘 태그 규칙

- 모든 태그는 여는 태그가 있으면 꼭 닫히는 태그가 있어야 한다.

최상위 태그규칙

- JSX 문법의 모든 태그는 반드시 최상위 태그로 감싸야 한다.

 

// 불가한 패턴

function Body2() {
  return (
    <div>div 1</div>
    <div>div 2</div>
  )
}

export deafult Body2;

 

 

그럼 무조건 최상위 태그를 넣어서 태그를 구성해야 하는가?

아니다.

 

리액트가 제공하는 fragment를 이용하여 가상의 태그를 만드는 방식을 제공한다.

 

//올바른 최상위 태그 규칙 패턴

function Body2() {
  return (
    <React.Fragment>
      <div>div 1</div>
      <div>div 2</div>
    </React.Fragment>
  )
}

export deafult Body2;

 

React.Fragment는 최상위 태그로 보여줄 뿐 실제로 브라우저에서 랜더링 되진 않는다. 

 

<React.Fragment> 대신 빈 태그인  <></> 를 사용할 수도 있다.

 

function Body2() {
  return (
    // <React.Fragment>
    // 아래의 태그로 대체 가능
    <>
      <div>div 1</div>
      <div>div 2</div>
    </>
    // </React.Fragment>
  )
}

export deafult Body2;

 

 

 

다음은 Body 컴포넌트 함수에 css를 적용하는 예시이다.

 

 

 

 

.body {
  background-color: green;
  color: blue;
}

 

 

 

import './Body.css';
// src/components/Body.js

const Body = () => {
  const numA = 1;
  const numB = 2;
  const strA = 'Hello';
  const strB = 'World';
  const boolA = true;
  const boolB = false;
  const objA = { a: 1, b: 2, c: 3 };
  return (
    <div className="body">
      <h1>Body</h1>
      <h2>{numA} + {numB} = {numA + numB}</h2>
      <h2>{strA} + {strB} = {strA + strB}</h2>
      <h2>{ (boolA || boolB) ? '참입니다.' : '거짓입니다.'}</h2>
      <h2> {objA.a} :: {JSON.stringify(objA)} </h2>

    </div>
  );
}

export default Body;