[리액트] 기본 정리 : JSX

참고 도서명 : 리액트를 활용한 프론트엔드 개발 | 저자 : 문하영 

JSX : HTML과 JavaScript의 강력한 결합

 JavaScript와 XML을 결합한 문법으로, 리액트 컴포넌트를 정의할 때 사용됨.

 

기본적인 사용법 

 HTML과 유사한 구문인 JSX문법을 사용 → 트랜스파일러가 JavaScript 함수호출로 변환

☞  직접 DOM 조작 X UI를 선언적으로 정의 가능

 

장점	주요 특징
JavaScript  모든 기능 활용 가능 동적 콘텐츠 쉽게 생성 가능 사용자 정의 컴포넌트를 쉽게 사용	HTML 유사 문법 JavaScript 표현식 사용 컴포넌트 기반 조건부 렌더링 리스트 렌더링 속성 사용 주석 사용 문법적 제한

 

1. HTML 유사 문법

• JSX는 HTML과 유사한 문법을 사용하여 UI를 정의할 수 있음. →  직관적으로 컴포넌트를 작성할 수 있음.

2. JavaScript 표현식 사용

• 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있음. →  동적인 데이터를 쉽게 반영할 수 있음.

const name = "철수";
const greeting = <h1>안녕하세요, {name}!</h1>;

 

3. 컴포넌트 기반

            : JSX는 사용자 정의 컴포넌트를 쉽게 사용할 수 있도록 지원함.

• 컴포넌트는 대문자로 시작하며, props를 통해 데이터를 전달할 수 있음.

4. 조건부 렌더링

           : JSX 내에서 JavaScript의 조건문을 사용하여 조건부 렌더링이 가능함.

• 삼항 연산자를 사용하여 상황에 따라 다른 UI를 보여줄 수 있음.

const isLoggedIn = true;
const greeting = (
  <h1>
    {isLoggedIn ? "환영합니다!" : "로그인해 주세요."}
  </h1>
);

5. 리스트 렌더링

• 배열을 JSX로 렌더링할 때는 map 메서드를 사용하며, 각 요소에 고유한 key 속성을 부여해야 함.

const items = ['사과', '바나나', '체리'];
const itemList = (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

6. 속성 사용

• JSX에서 HTML 속성과 유사하게 속성을 전달할 수 있지만, camelCase를 사용해야 함. 예를 들어, class는 className, onclick은 onClick으로 작성해야 함.

const element = <div className="container">내용</div>;

7. 주석 사용

   JSX 내에서 주석을 사용 가능. 중괄호 안에서 JavaScript 주석을 작성해야 함.

const element = (
  <div>
    {/* 이곳은 주석입니다. */}
    <h1>안녕하세요!</h1>
  </div>
);

8. 문법적 제한

  JSX는 반드시 하나의 루트 요소로 감싸야 함. 여러 요소를 반환할 때는 Fragment(<>...</>)를 사용할 수 있음.

const element = (
  <>
    <h1>첫 번째 제목</h1>
    <h2>두 번째 제목</h2>
  </>
);