> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/mission/html-markup-react-jsx.md).

# 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 %}