# 컴포넌트 동적 활용(컴포넌트 아이디)

## 속성 설명

### 컴포넌트 아이디란?

시나리오 스튜디오의 컴포넌트[^1]는 고유한 ID 값을 갖습니다. 이를 컴포넌트 아이디라고 합니다. 

### 컴포넌트 아이디 접근 방법

{% hint style="info" %}
컴포넌트 종류별로 컴포넌트 아이디 접근 방법이 다릅니다.
{% endhint %}

#### Group, Layout

: 개발 모드(Dev)의 컴포넌트 아이디 영역을 통해 확인 가능합니다. 

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FPrR2HJJaEMs7AMItKmPW%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.24.29.png?alt=media&#x26;token=eae3f36c-97e8-4596-a21f-3ee94ac220bd" alt=""><figcaption><p>[그룹명] , [레이아웃명] 우측에 위치</p></figcaption></figure>

#### 모든 컴포넌트 (Step, Group, Layout, Controls, StepButton)

:  [스크립트 도우미](https://docs.flextudio.com/flextudio/scenario/event/script-editor#undefined-2)를 통해 접근 가능합니다.&#x20;

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FQTjtzZdTVF8gZNojeWS8%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-04-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.16.33.png?alt=media&#x26;token=7b5c53b9-2ec1-441f-a3bc-43ba281c61b7" alt=""><figcaption></figcaption></figure>

1. 컴포넌트 아이디가 param으로 들어가는 스크립트 사용 시, 해당 컴포넌트 클릭&#x20;
2. 스크립트 도우미에 의해 자동으로 컴포넌트 아이디가 param에 채워집니다.&#x20;

## 예시

* 컴포넌트 아이디가 필요한 스크립트의 사용

```
f.Content("그룹/레이아웃 아이디").Scroll.offset 
```

* HTML 요소의 접근을 통한 유연한 개발

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FuQhuEry8SMIvbYQdT2Tv%2FApr-18-2024%2015-44-32.gif?alt=media&#x26;token=0797676d-3af5-42fc-971c-54231d7a722b" alt=""><figcaption></figcaption></figure>

f.Component("컴포넌트 아이디").element이 Dom element 임을 활용한 커스텀 이벤트 예제입니다.

addEventListener로 이벤트에 따른 요소의 움직임을 구현할 수 있습니다. 아래는 해당 코드입니다.&#x20;

{% code title="f.Component("f\_12").element로 요소 접근" %}

```javascript
const draggable = f.Component("f_12").element
_v.isDragging = false;
_v.offsetX = null;
_v.offsetY = null;

function startDrag(event) {
    _v.isDragging = true;
    const rect = draggable.getBoundingClientRect();
    _v.offsetX = event.clientX - (rect.left + rect.width / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
    _v.offsetY = event.clientY - (rect.top + rect.height / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
}

function endDrag() {
    _v.isDragging = false;
    _v.offsetX = null;
		_v.offsetY = null;
}

function drag(event) {
    if (_v.isDragging) {
        const x = event.clientX - _v.offsetX;
        const y = event.clientY - _v.offsetY;
        draggable.style.transform = `translate(${x}px, ${y}px)`;
    }
}

draggable.addEventListener('mousedown', startDrag);
draggable.addEventListener('mouseup', endDrag);
document.addEventListener('mousemove', drag);
//앱 이벤트를  위한 처리
...
```

{% endcode %}

[^1]: Step, Group, Layout, Controls, StepButton을 지칭하는 말