[React] 5. JXS로 UI표현하기

Feb 13, 2026

Contents

1. JSX란 2. JSX 주의사항 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다 2. 숫자, 문자, 배열값만 랜더링된다 3. 모든 태그는 닫혀있어야한다 3. 조건으로 분기하여 UI 랜더링하기 4. DOM 요소 스타일 제어하기 1. 별도의 css 파일 생성 2. import 하여 사용

1. JSX란

💡

확장된 자바스크립트 문법

2. JSX 주의사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다

💡

자바스크립트 표현식은 특정한 값으료 표현될 수 있는 식을 말한다. 조건문이나 반복문 같은 식은 특정한 값으로 표현될 수 없기 때문에 사용할 수 없다.

변수에 값을 저장하고 중괄호를 활용하여 값을 출력할 수 있다.

이 때, 중괄호 안에는 문자나 숫자식이라면 무엇이든 들어갈 수 있다.

삼항연산자도 넣을 수 있다.

⇒ 반환하는 값이 문자열이기 때문에!

2. 숫자, 문자, 배열값만 랜더링된다

💡

그 밖의 boolean, undefined, null 값은 랜더링되지 않는다.

중괄호 안에 넣었을 때 오류를 유발하지는 않지만 랜더링되지는 않기 때문에 값이 나타나지 않는다.


const Main = () => {
  const number = 10;

  return (
    <main>
      <h1>Main</h1>
      <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
      {10}
      {number}
      {[1, 2, 3]}
      {true}
      {undefined}
      {null}
    </main>
  );
};

export default Main;

중괄호 안에 객체를 넣었을 땐 랜더링되지 않는 것이 아니라 오류가 발생한다!

오류가 발생하면 화면에 아무것도 그려지지 않는다.

따라서 객체 안에 있는 값을 랜더링하고자 하는 경우에는 다음과 같이 점표기법을 사용하여 문자열이나 숫자를 랜더링 할 수 있도록 해야한다.

3. 모든 태그는 닫혀있어야한다

4. 최상위 태그는 반드시 하나 여야만 한다

만일 최상위를 묶을 만한 적당한 태그가 없을 때에는 빈태그 <></> 로 두어도 되는데, 이 때 개발자도구를 통해 구조를 확인해보면 모든 요소가 하나의 상위 태그에 묶여있지 않고 흩뿌려져 있는 것을 확인 할 수 있다.

3. 조건으로 분기하여 UI 랜더링하기

💡

유저 객체를 만들고, 로그인한 유저에게는 로그아웃 버튼을 보여주고 로그인하지 않은 유저에게는 로그인 버튼을 보여주자


const Main = () => {
  const user = {
    username: "서회정",
    isLogin: true,
  };

  return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

삼항연산자가 아닌 if 문으로 사용하여 조건분기 랜더링을 할 수 있다.


const Main = () => {
  const user = {
    username: "서회정",
    isLogin: false,
  };

  if (user.isLogin) {
    return <div>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
};

4. DOM 요소 스타일 제어하기

1. 별도의 css 파일 생성

2. import 하여 사용

💡

css는 import할 때 따로 이름을 작성하지 않고 경로만 입력해도 리액트에서 잘 찾아준다

jsx 문법에서는 html에서 사용하던 class가 아닌 js에서 스타일을 작성할 때 사용하던 문법인 className을 사용하여 클래스명을 부여한다


import "./Main.css";

const Main = () => {
  const user = {
    username: "서회정",
    isLogin: true,
  };

  if (user.isLogin) {
    return <div className="logout">로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
};

export default Main;