# JSX

## JSX

JSX란 자바스크립트를 기반으로 하여 태그(Tag) 형태의 문서를 생성할 수 있도록 만들어진 템플릿 문법이다.

## JSX 값 출력

JSX에서 Javascript 값을 출력하고 싶다면 중괄호 { } 를 사용한다.

```jsx
const name = '피카츄';

app.render(
    <>
        <h1>Your name is {name}</h1>
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/jOKOWbL>" %}

계산하여 출력하는 것도 가능하다.

```jsx
const number = 12.345;

app.render(
    <>
        <h1>Number : {number}, Round Number : {parseInt(number)}</h1>
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/vYrYLLY>" %}

## 조건부 출력

값에 따라 조건부 화면을 렌더링하는 것도 가능하다.

### 삼항연산자

삼항연산자는 조건식과 참/거짓일 경우에 대한 내용을 통해 화면을 구현한다. 구문 자체가 지저분하기 때문에 간단한 작업에서 사용한다.

```jsx
const value = 5;

app.render(
    <>
        <h1>{value} is {value%2==0 ? '짝수':'홀수'}</h1>
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/eYKYJJK>" %}

### if-else

JSX 내부에서는 if-else를 사용할 수 없으므로 외부에서 미리 Element를 생성하여 작성할 수 있다. 화면이 복잡해질 수록 이 방식이 유용하다.

```jsx
const value = 5;

let el;
if(value % 2 == 0){
    el = <h1>{value} is 짝수</h1>
}
else {
    el = <h1>{value} is 홀수</h1>
}

app.render(
    <>
        {el}
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/Yzvzwqz>" %}

## 객체 출력

객체가 데이터로 주어진 경우 이를 이용하여 화면에 출력할 수 있다. 객체의 요소에 접근하려면 참조 연산(.)을 사용한다.

```jsx
const member = {
    id:"admin", 
    nickname:"관리자",
    password:"1234"
};

app.render(
    <>
        <h1>회원 정보</h1>
        <ul>
            <li>아이디 : {member.id}</li>
            <li>닉네임 : {member.nickname}</li>
            <li>비밀번호 : {member.password}</li>
        </ul>
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/BaVajKQ>" %}

## 반복 출력

배열에 대해 반복하여 화면 출력이 가능하다.

```jsx
const lotto = [5, 13, 15, 23, 41, 44];
const lottoElement = lotto.map(number=><h2>{number}</h2>);

app.render(
    <>
        <h1>로또번호</h1>
        {lottoElement}
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/abKbdZP>" %}

map은 배열 내부의 요소를 활용하여 다른 내용으로 변환할 수 있도록 하는 변환 함수이다.

<div align="left"><figure><img src="/files/tHIeQt2G6T0E4jgcZi9Y" alt=""><figcaption></figcaption></figure></div>

### key의 사용

key는 배열의 요소가 변하여 렌더링이 다시 일어나야 할 때 해당하는 요소를 별도의 탐색 없이 식별하기 위하여 부여하는 고유 값이다. <mark style="color:red;">**유일한 항목이 존재할 경우**</mark> 사용하며, 객체는 지정할 수 없다.

```jsx
const monsterList = [
    {no : 1 , name : "이상해씨", type:"풀"},
    {no : 4 , name : "파이리", type:"불꽃"},
    {no : 7 , name : "꼬부기", type:"물"},
    {no : 25 , name : "피카츄", type:"전기"},
    {no : 26 , name : "라이츄", type:"전기"}
];
const monsterElements = monsterList.map(monster=>
    <h2 key={monster.no}>번호 : {monster.no}, 이름 : {monster.name}, 속성 : {monster.type}</h2>
);

app.render(
    <>
        <h1>몬스터 목록</h1>
        {monsterElements}
    </>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/PoaoZGz>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/reactjs/cdn/jsx.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.