[react/js] React의 JSX 간단하게 살펴보기

Date: 2026.01.05 Updated: 2026.01.05

카테고리: React

JSX 란?

순수 html 를 작성하다 보면, 계층이 복잡해지거나, 코드가 너무 많아져서 관리하기가 힘듭니다. 그 문제를 해결하기 위해서 페이스북에서 만든 Javascript 확장 문법으로, Html + Javascript를 의미합니다.

JSX는 일반 html과 조금 다르게, 속성명이 조금 다릅니다. class 속성명은 className, onclick 은 onClick 으로 작성해야 합니다 . 이는 이미 js 에서 예약된 단어들이 존재하기 때문입니다. 또한, JSX는 하나의 태그로 묶여있어야 합니다. 보통 div태그로 많이 묶어서 사용합니다.

문법

다음은 강의에서 소개되는 JSX의 간단한 문법들 입니다.

변수값 넣기

jsx에서는 변수의 값을 {}를 통해서 감싸줘야 변수 값이 제대로 화면에 렌더링 됩니다. 우선, 문자열을 대입하는 예제 입니다.

let text = 'Hello, world!';

const element = (
<div>
	<h1>변수 넣기</h1>
	<ul>
	  <li>{text}</li>
	  <li>{text + 'test'}</li>
	</ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

위 결과를 보면, text를 {}로 감싸서 변수 안에 담겨있는 값을 출력한것을 볼 수 있습니다. 또한, 문자열 변수에 리터럴 문자열을 더하면, 문자열 더하기가 되어있는 문자열이 랜더링 됩니다.

숫자 및 계산식 넣기

const num = 15;

const element = (
<div>
	<h1>숫자 및 계산식 넣기</h1>
	<ul>
	  <li>{num}</li>
	  <li>{num + 15}</li>
	</ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

숫자를 대입할때도 마찬가지로 {}를 사용합니다. {}안에서 연산을 하게 되면, 연산이 완료된 값이 랜더링 됩니다.

Bool, Null 값 대입

const element = (
<div>
    <h1>Boolean, Nullish 값 넣기</h1>
    <ul>
      <li>{true}</li>
      <li>{false}</li>
      <li>{undefined}</li>
      <li>{null}</li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

bool 값과 null 값들을 넣어보면 아무것도 랜더링 되지 않습니다. 이것은 jsx에서 의미없는 값들은 랜더링 하지 않도록 설계하였습니다. 또한, 이를 통해 조건부 랜터링을 가능하게 합니다.

Object, Array 넣기

const arr = ['a', 'b', 'c'];

const element = (
<div>
    <h1>Object, Array 넣기</h1>
    <ul>
      {/* <li>{obj}</li> */}
      <li>{arr}</li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

우선, object 형은 리스트의 아이템으로 들어가면 랜더링 되지 않습니다. 인터프리터에서 오류라고 생각하여 js 파일 전체를 랜더링 하지 않습니다.

반면, 배열은 자동으로 안에 있는 내용들을 합쳐서 랜더링하게 됩니다.

태그 속에 속성 넣기

const imageUrl =
  'https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg';
 const element = (
 <div>
    <h1>태그 속석에 넣기</h1>
    <ul>
      <li>
        <img src={imageUrl} alt="logo" />
      </li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

jsx에서 태그에 속성을 넣는 방식은 기존 html과 같습니다. 여기서 조금 다른 점은 속성값을 넣을 때, 변수값이 들어가야 한다면, 위와 마찬가지로 {}를 사용하여야 합니다.

삼항연산자

여기서부터는 jsx에서 사용하는 조건문들 입니다. 기존 다른언어들에서 사용하는 조건문과 살짝 다른 부분이 있어서 포스팅 합니다.

 const element = (
 <div>
    <h1>삼항연산자</h1>
    <ul>
      <li>{1 + 1 === 2 ? "참입니다" : "거짓입니다."}</li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

jsx에서는 식이 복잡해지는것을 최대한 막기 위해서, if~else 와 같은 조건문 보다는 축약이 된 삼항연산자를 많이 사용한다고 합니다.

AND 연산자

And 연산자는 기본적으로 조건이 전부 true 인지를 검사하는 논리게이트 입니다. 하지만 jsx에서는 조금 다르게 사용합니다. jsx에서의 And 연산자는 조건이 참이면, 두번째의 요소를 출력하는 식으로 동작합니다. 반대로, 앞의 조건이 거짓이면, 아무것도 출력하지 않게 됩니다.

 const arr1 = [1, 2, 3];
 const text1 = "";
 
 const element = (
 <div>
    <h1>AND 연산자</h1>
    <ul>
      <li>{1 + 1 === 2 && 'AND 연산자1'}</li>
      <li>{arr1.length === 1 && 'AND 연산자2'}</li>
      <li>{arr1.length === 3 && 'AND 연산자3'}</li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

결과를 보면, 1+1 === 2 가 참이기 때문에, 그 다음에 있는 AND 연산자1을 출력한것을 볼 수 있습니다. 다음으로, arr1.length === 1은 거짓이기 때문에, 화면에 아무것도 출력하지 않는것을 볼 수 있습니다. (jsx에서 기본적으로 bool 값은 랜더링 하지 않음) 마지막으로 arr1.length === 3이 참이기 때문에 AND 연산자3은 정상적으로 출력됐음을 알 수 있습니다.

OR 연산자

OR 연산자도 AND 연산자와 마찬가지로 조금 다르게 동작합니다. 두 조건을 비교하여 앞의 값이 참이면, 앞의 값을 반환, 앞의값이 거짓이면, B를 반환하는 식으로 동작합니다. AND 연산자와 다른점은 참인값을 반환한다는 점입니다.

AND 연산자 : A && B

A가 참 -> B 반환
A가 거짓 -> A반환 (랜더링 안함)

OR 연산자 : A || B

A가 참 -> A 반환
A가 거짓 -> B 반환

 const arr1 = [1, 2, 3];
 const text1 = "";
 
 const element = (
 <div>
    <h1>OR 연산자</h1>
    <ul>
      <li>{1 + 1 !== 2 || 'OR 연산자1'}</li>
      <li>{text || 'OR 연산자2'}</li>
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

결과를 보면, 처음 식에서 1+1 !== 2는 거짓이기 때문에, 뒤에 있는 문자열 OR 연산자1이 랜더링 된 것을 알 수 있습니다. 두번째 아이템을 보면, text는 항상 참인 값이기 때문에 text 변수 안에 담겨있는 값인 Hello, World!가 출력되는것을 볼 수 있습니다.

배열에 있는 요소 리스트에 넣기

배열로 받아온 정보들을 리스트에 뿌려주는 로직은 정말 많이 사용하는 로직 중에 하나입니다. jsx에서는 for문을 사용하는것 대신에 map()이라는 함수를 사용하여 반복합니다. 여기서 주의해야 하는 점은 리스트의 아이템을 바꿀 때가 존재할 수 있기 때문에, 반드시 리스트의 아이템에 key값을 넣어줘야 합니다.

 const arr = ['a', 'b', 'c'];
 
 const element = (
 <div>
    <h1>Array.map</h1>
    <ul>
      {arr.map((item,  index) => {
        return <li key={index}><h4>{item}</h4></li>;
      })}
    </ul>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

스타일 적용하기

jsx에서 스타일을 적용하는 방법입니다. 첫번째 방법으로는 css 파일을 만들어서 import구문으로 참조를 넣어주는 방법, 두번째 방법으로는 style을 변수에 정의해서 사용하는 방법이 있습니다.

index.css 라는 파일을 다음과 같이 만들어 줍니다.

.highlight {
  color: #fff;
  font-weight: bold;
  font-size: 36px;
}

그 후에, index.js에 해당 파일을 import 해주면 됩니다.

import './index.css';
import ReactDOM from 'react-dom';

const element = (
<div className="highlight"> 
	
</div>
);

다음 방법은, 변수로 style을 저장하여 사용하는 방법입니다. 스타일을 변수로 만들때는, 객체형으로 만들게 되며, key값으로 CammelCase로 이루어진 속성명을 넣어주면 됩니다. 마찬가지로 변수이기 때문에 {}안에 넣어서 사용해야 합니다.

import './index.css';
import ReactDOM from 'react-dom';

const roundBoxStyle = {
  top: 50,
  left: 50,
  width: '50%',
  height: '200px',
  padding: 20,
  background: 'rgba(162,216,235,0.6)',
  borderRadius: 50
};
 
 const element = (
<div style={roundBoxStyle}>
  <div className="highlight">
	<p>Hello, World!</p>
  </div>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

이런식으로 스타일이 적용된 요소가 랜더링 되는것을 볼 수 있습니다.

조건부 스타일

스타일을 조건적으로 넣을 수 있습니다. 앞서 살펴보았던 AND, OR 게이트를 속성에 넣어서 사용합니다.

 <div className={1 + 1 === 2 ? 'highlight' : false}>
 </div>

이런식으로 사용하면, 조건에 따라서 스타일을 입힐 수 있습니다.

마시남