REACT. JSX문법 1/3

개요

기초를 단단히 다니자

리액트를 사용할 때 사용하는 기본적인 코드를 이해해보자

 

문법1. 감싸는 요소

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

 

왜냐하면 가상 돔에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 돔 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다

 

가상 돔이 조금 어려울 수 있으나 

그냥 부모 요소 하나로 감싸야 되구나 하면 된다!

 

감싸는 방법은 (용도에 맞는) 아무 태그나 써도 되지만

아래의 방법도 가능하다

<>
...
</>

문법2. 자바스크립트 표현

JSX에서 자바스크립트 표현식을 작성하려면

JSX 내부에서 코드를 { }로 감싸면 된다

import React from 'react';

function App(){
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}

export default App;

출력 값

리액트 안녕!
잘 작동하니?

이 방법은 정말 많이 사용한다 

이걸 읽는 지금도 당신의 반경 1km내의 사람 중 한 명은 이걸 사용하고 있을 것이다

문법3. IF문 대신 조건부 연산자

if문을 사용할 수 없지만, 삼항연산자를 조금 다른 방식으로 {중괄호}를 통하여 사용할 수 있다

기본문법
{ __조건문__ ? (__참__) : (__거짓__) }

 

예제는 아래와 같다

import React from 'react';

function App(){
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h1>리액트가 아닙니다.</h1>
      )}
    </div>
  );
}

export default App;