---
url: https://nsh.dev/ko/elements
description: "Rust와 TSX에서 NSH 앱을 구성하는 기본 요소와 컴포넌트, 공통 속성, 이벤트, ref 메서드를 살펴봅니다."
---
# 요소
Native Shell의 모든 화면은 `View`, `Text`, `Image` 같은 기본 요소와 `Button`, `Dialog`, `NavStack` 같은 기본 컴포넌트로 구성됩니다. 각 기본 요소는 NSH 런타임이 생성하고 배치하는 네이티브 뷰입니다. iOS와 Mac Catalyst에서는 UIView의 하위 클래스, Android에서는 `View`, 데스크톱에서는 AppKit, GTK 또는 Win32 뷰를 사용합니다. 앱에서 사용하는 버튼, 카드, 행, 화면은 이 요소들로 만든 컴포넌트이며, 각각의 스타일과 앱 전체의 디자인은 앱에서 결정합니다.
예제는 Rust와 TSX로 제공합니다. 탭에서 언어를 고르면 같은 페이지에 있는 다른 예제에도 적용됩니다.
```rust
use nsh_core::prelude::*;
fn app() -> impl IntoElement {
let count = signal(0_u32);
view()
.flex_1()
.items_center()
.justify_center()
.gap_3()
.child(text(move || format!("Tapped {} times", count.get())).text_2xl())
.child(
view()
.rounded_lg()
.bg(rgb(0x2563eb))
.px_4()
.py_2()
.active(|s| s.opacity(0.6))
.on_press(move || count.update(|n| *n += 1))
.child(text("Tap").text_color(white())),
)
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
function App() {
const count = signal(0);
return (
Tapped {count()} times
count.update((n) => n + 1)} class="rounded-lg bg-blue-600 px-4 py-2 active:opacity-60">
Tap
);
}
mount(App);
```
Rust의 기본 요소는 `nsh_core::prelude`의 함수(`view()`, `text(..)`, `image(..)`)이며, 기본 컴포넌트는 `nsh_base` 크레이트에서 가져옵니다. 스타일은 타입이 있는 메서드(`.flex_1()`, `.gap_3()`, `.px(px(20.0))`, `.bg(..)`)로 지정하고, 상태별 스타일에는 클로저(`.active(|s| s.opacity(0.6))`)를 전달합니다. 이벤트 리스너도 클로저(`.on_press(move || ..)`, `.on_change(move |text: &str| ..)`)이며, 자식은 `.child(..)`로 추가합니다. UI를 구성하는 일반 함수는 한 번 실행되어 `impl IntoElement`를 반환합니다. `text(move || ..)`, `.bg(move || ..)` 등의 클로저 안에서 읽은 시그널이 바뀌면 해당 바인딩이 갱신됩니다. [Rust로 앱 작성하기](https://nsh.dev/translations/ko/docs/rust.md)를 참고하세요.
TSX 태그는 PascalCase로 작성하며 현재 범위에 있는 이름을 참조합니다. 기본 요소는 `nsh`에서, 기본 컴포넌트는 `nsh/base`에서 가져옵니다. 전역인 ``와 ``만 가져오기 없이 쓸 수 있습니다. ``처럼 소문자로 작성하면 빌드 오류가 발생합니다. 소문자 태그를 허용하면 TypeScript가 태그 이름마다 하나의 전역 타입을 사용하게 되어 `List`와 `Each` 같은 제네릭 컴포넌트에서 항목 타입을 추론할 수 없기 때문입니다. 컴파일러는 가져온 요소를 식별하고 사용 위치에 네이티브 뷰를 생성하므로 가져오기에 따른 런타임 비용은 없습니다. [JSX와 컴포넌트](https://nsh.dev/translations/ko/docs/jsx-and-components.md)에서 더 알아볼 수 있습니다.
```tsx
import { Canvas, Image, List, Overlay, Scroll, Shader, Text, Video, View, WebView } from "nsh";
import { Button, Dialog, Menu, NavPage, NavStack, Popover, Sheet, Tooltip, Input } from "nsh/base";
```
## 기본 요소
TSX에서는 `nsh`에서, Rust에서는 `nsh_core::prelude`에서 가져옵니다.
| 요소 | Rust | 네이티브 뷰(iOS / Android) | 문서 |
|---|---|---|---|
| `` | `view()` | UIView / ViewGroup. `selectable`이면 내부 텍스트를 함께 선택할 수 있음 | [View](https://nsh.dev/translations/ko/elements/view.md), [텍스트 선택](https://nsh.dev/translations/ko/elements/text-selection.md) |
| `` | `text(content)` | CoreText 뷰 / StaticLayout 뷰 | [Text](https://nsh.dev/translations/ko/elements/text.md) |
| `` | `image(src)` | 이미지 레이어가 있는 뷰 / 이미지 뷰 | [Image](https://nsh.dev/translations/ko/elements/image.md) |
| `` | `scroll()` | UIScrollView / ScrollView | [Scroll](https://nsh.dev/translations/ko/elements/scroll.md) |
| `` | `virtual_list(count, \|at\| row)` | 셀을 재사용하는 UIScrollView / ScrollView | [List](https://nsh.dev/translations/ko/elements/list.md) |
| `