React 03 - JSX를 알아보자

18 Dec 2023

이전 포스팅에서 React Project를 생성하고 띄워보았다. React Project는 JSX문법으로 구성되어 있다는데, 그렇다면 JSX란 무엇일까?

App.js 파일을 열어보면 자바스크립트의 function에서 html 문서와 비슷하게 구성하여 반환하고 있다.

JSX란 자바스크립트의 확장 문법이다. 위와 같은 문법으로 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return (
    <div>
      <h1>TEST</h1>
    </div>
  )
}

위와 같이 html로 구성되어 있는 문서가 있다면

function APP(){
  return React.createElement("div", null, React.createElement("h1",null,"TEST"))
}

의 형식으로 변환되는 것이다. 이처럼 JSX를 사용하지 않으면 매번 createElement를 사용하여 안에 매개변수를 적어주고 해야하는 번거로움이 생기는 것이다.

위 과정들을 바벨이 해준다는 것이 포인트인데, 바벨이란 javascript 컴파일러라고 생각하면 된다. 일반적으로 컴파일러라 하면 개발언어를 컴퓨터가 읽어들일 수 있도록 하는 도구인데 위의 바벨은 자바스크립트로 변환해주는 역할을 한다고 보면 될 것 같다.

덧붙여 많은 브라우저들이 있고 표준 문법을 맞춰 사용해야 모든 브라우저에서 호환이 된다. 이 표준 분법은 ESNext인데 이 문법에 맞춰는 역할 또한 바벨이 해준다. ~~우리는 React 포스팅이기 때문에 간단하게 이정도로만 이해하고 넘어가자.~~

JSX 문법에서 몇가지 지켜야 할 규칙이 있다.

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

function App(){
  return (
    <h1>Test</h1>
    <h2>Test</h2>
  )
}

위와 같은 구성은 부모 요소로 감싸지 않았기 때문에 오류가 난다.

function App(){
  return (
    <div>
      <h1>Test</h1>
      <h2>Test</h2>
    </div>
  )
}

부모 요소로 감싸 준다면?

오류가 나지 않는다. 가상DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 이러한 규칙 때문에 트리구조를 이루어져야 하고 트리 구조를 만들기 위해선 부모 요소가 감싸줘야 트리 구조가 구성되기 때문이다. 위의 예제에서는 <div>를 부모 요소로 감쌌지만, 개발을 하다보면 요소를 사용하지 못할 때가 있다.

그럴 땐 Fragment를 사용하면 된다.

function App(){
  return (
    <Fragment>
      <h1>Test</h1>
      <h2>Test</h2>
    </Fragment>
  )
}

이 Fragment도 귀찮다면

function App(){
  return (
    <>
      <h1>Test</h1>
      <h2>Test</h2>
    </>
  )
}

이런 방법도 있다.

JSX에서 문법적으로 편하고 쉽게 사용하는 기능은 엄청 유용하고 효율적이고 직관적이라는걸 이해했다. 그럼 이러한 기능만 있을까? JSX안에서는 자바스크립트 표현식을 사용할 수 있다. 코드를 { }로 감싸면 된다.

function App(){
  const test = '테스트';
  return (
    <>
      <h1>{test}</h1>
      <h2>Test</h2>
    </>
  )
}

if문 대신 조건부 연산자를 사용한다. if문을 사용하고 싶으면 JSX 밖에서 if문을 사용하여 값을 미리 셋팅 해두고 사용해야 한다.

function App() {
  const name = 'TEST';
  retunr (
 <div>
   { name === 'TEST' ? 
     (<h1>테스트입니다</h1>):
     (<h2>테스트가 아닙니다</h2>)
   }
 </div>
  )
}

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

function App() {
  const name = 'TEST';
  return (
    <div>
      { name === 'TEST' ? 
        <h1>테스트입니다</h1>:
        null
      }
    </div>
  )
}

위와 같이 조건에 만족하지 않으면 null 처리를 통하여 아무것도 보여주지 않는 방법도 있지만

function App() {
  const name = 'TEST';
  return (
    <div>{ name === 'TEST' && <h1>테스트입니다</h1> }</div>
  )
}

위와 같이 && 연산자를 통해 간결하게 하는 방법도 있습니다.

undefined를 렌더링하지 않기 (~~당연한 이야기겠지만..~~)
```
function App() {
  const name = undefined;
  return name;
}
```

undefined 자체를 return 하면 안되지만 조건식을 통하여 거르거나 내부에서 사용하는건 가능하다고 한다.

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

function App() {
  const name = undefined;
  return <div>{name || 'undefined입니다.'}</div>;
}

OR연산자가 헷갈릴 수 있겠지만 OR 연산자는 둘중의 하나만 만족하면 true이므로 해당 값을 리턴한다.

class 대신 className을 사용한다.

function App() {
  const name = '테스트';
  return <div className='testCss'>{name}</div>;
}

모든 태그는 닫아주세요.
주석은 {/···/}

다음은 컴포넌트 관련 포스팅에서 뵙겠습니다~

컴포넌트를 알아보자

if(재능이 없으면 시간으로 극복하라){return 성공;}

Profile

Post

Project

React 03 - JSX를 알아보자