# Assets ▸ React JSX

UploadButton 컴포넌트 마크업을 React JSX로 만드는 실습을 진행합니다.

![](https://gblobscdn.gitbook.com/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUvqiL7JS1q8NDn8YRG%2F-MUvrs2wsScXYWOiMtGA%2Fezgif.com-gif-maker.gif?alt=media\&token=814b9b98-7908-4f2a-912c-84bf5d051ef4)

### 🎩 Mission

1. 버튼 마크업에서 데이터를 추출해 JSON 객체를 구성하세요.
2. 각 버튼을 JSX를 활용해 React 요소로 만드세요.
3. React 요소를 App 컴포넌트의 자식(들)로 설정해 브라우저 뷰(View)에 렌더링해보세요.

{% hint style="success" %}
예습해서 React 컴포넌트 제작이 가능한 분들은 React 요소 대신 컴포넌트를 만들어보세요.
{% endhint %}

### 🎩 Markup

React JSX로 만들어야 하는 구조는 다음 HTML 마크업을 참고합니다.

```markup
<button type="button" class="button button__upload button--idle">
  업로드
  <img src="./src/assets/up-arrow.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--pending">
  업로드 중
  <img src="./src/assets/spinner.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--resolved">
  완료
  <img src="./src/assets/check-mark.svg" alt="" height="12" />
</button>

<button type="button" class="button button__upload button--rejected">
  실패
  <img src="./src/assets/cross.svg" alt="" height="12" />
</button>

<button
  type="button"
  class="button button__upload button--disabled"
  disabled
>
  업로드
  <img src="./src/assets/not-allowed.svg" alt="" height="12" />
</button>
```

### 🎩 CSS

문서, 루트 요소, 버튼 요소 스타일 코드입니다.

```css
body {
  margin: 0;
  background: #eeeffd;
}

#root {
  min-height: 80vh;
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.button {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-width: 5.5625rem;
  border: 0;
  border-radius: 3rem;
  padding: 0.75em 1em;
  font: bold 0.75rem/1 SpoqaHanSans;
  background: #ffffff;
  color: #525577;
  transition: all 0.58s cubic-bezier(0.77, 0, 0.18, 1);
  box-shadow: 0 4px 4px #dbddf0;
}
.button:hover {
  transform: scale(1.2);
  box-shadow: 0 9px 6px #dbddf0;
}
.button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(147, 153, 210, 0.56);
}
.button:focus:not(:focus-visible) {
  box-shadow: none;
}
.button[disabled] {
  cursor: not-allowed;
  color: #adaeb6;
}
.button[disabled]:hover {
  transform: none;
  box-shadow: 0 4px 4px #dbddf0;
}
```

### 🎩 Icons

버튼 아이콘 압축 파일입니다.

{% file src="/files/-MVOMD2dd25elHK5bIeB" %}
icons.zip
{% endfile %}


---

# 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://yamoo9.gitbook.io/learning-react-app/mission/html-markup-react-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.