# React · 사용법

기본적으로 Edge.Provider와 Edge.Surface를 사용하세요. 기존 컴포넌트에 직접 연결할 때는 useSurface를 사용할 수 있습니다.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ko/docs/react/usage/

<a id="share-one-light"></a>

## 영역 연결하기

먼저 [설치](https://edge.bolerish.com/ko/docs/installation/)를 마치세요. 서버 컴포넌트를 사용하는 프레임워크에서는 `"use client"`를 선언한 클라이언트 모듈 안에서 Edge를 사용하세요.

조명을 공유할 영역을 `Edge.Provider`로 감싸고, 반응할 요소에만 `Edge.Surface`를 사용하세요. 아래 두 카드는 같은 조명에 반응합니다. Edge.Provider를 중첩하면 독립적인 조명이 만들어집니다.

기존 컴포넌트로 조명 공유하기

```tsx
<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>
```

<a id="keep-your-styles"></a>

## 기존 스타일과 이벤트 유지하기

`as`로 렌더링할 HTML 태그를 선택하세요. 해당 요소의 HTML 속성, 이벤트, ref를 그대로 사용할 수 있고, `className`과 `style`으로 기존 스타일을 적용할 수 있습니다. Edge.Provider는 DOM 요소를 추가하지 않으며 각 Edge.Surface는 요소 하나를 렌더링합니다.

```tsx
<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>
```

input 요소에는 래퍼가 필요합니다. 기존 하이라이트나 가상 요소와 충돌하면 [적용 시 고려사항](https://edge.bolerish.com/ko/docs/integration/)을 참고하세요. 스타일은 [스타일](https://edge.bolerish.com/ko/docs/styles/), 움직임은 [움직임](https://edge.bolerish.com/ko/docs/motion/)에서 설정할 수 있습니다.

<a id="connect-existing-components"></a>

## 기존 컴포넌트 연결하기

Card나 Button이 자체 HTML 요소를 렌더링하고 있다면 컴포넌트 안에서 [useSurface(options)](https://edge.bolerish.com/ko/docs/react/use-surface/#use-surface)을 호출하고, 반환된 ref를 해당 요소에 연결하세요. 컴포넌트는 Edge.Provider 안에 두면 됩니다. React 18의 함수 컴포넌트는 `forwardRef`로 ref를 전달해야 합니다.

위치가 바뀌는 경우에는 [레이아웃 갱신](https://edge.bolerish.com/ko/docs/integration/#refresh-after-layout-changes)을 참고하세요.