VRIX 란?

vrix.js는 자바스크립트 기반의 유연하고 확장 가능한 UI 컴포넌트 라이브러리입니다.
가상 스크롤, 대용량 데이터 처리 등 단순한 구성부터 복잡한 UI 요구사항까지 폭넓게 대응할 수 있으며, 다양한 커스터마이징 옵션을 통해 개발 과정을 간소화합니다.
제공되는 주요 컴포넌트로는 List, Tree, Popup, Autocomplete, Tokenizer, Combobox, DateChooser, DatePicker 등이 있습니다.

Features

• 다양한 입력 UI 컴포넌트

  AutoComplete, Tokenizer, ComboBox 등은 입력 기반 제안 기능과 사용자 입력을 효과적으로 처리할 수 있습니다.

• 고성능 렌더링

  List, Tree 컴포넌트는 가상 스크롤 기반으로 수천 개의 항목도 부드럽게 렌더링합니다.

• 유연한 위치 조정 기능

  Popup 컴포넌트는 화면 경계를 벗어나지 않도록 자동으로 위치를 보정하며, 앵커 기반 정렬도 지원합니다.

• 실시간 동적 콘텐츠 반영

  동적으로 변경되는 데이터에 즉각 반응하며 UI가 자동 갱신됩니다.

• 날짜 선택 인터페이스

  DateChooser, DatePicker는 직관적인 캘린더 UI와 다양한 날짜 포맷 옵션을 제공합니다.

• 복잡한 계층 구조 지원

  Tree 컴포넌트는 부모-자식 노드 간 탐색, 확장/축소, 드래그 앤 드랍까지 폭넓은 상호작용을 제공합니다.

• 사용자 맞춤 렌더링

  거의 모든 항목은 커스텀 렌더러를 통해 원하는 형태로 렌더링할 수 있습니다.

• 포커스 및 상호작용 관리

  자동 포커스, 외부 클릭 닫기, 키보드 이벤트 등 다양한 인터랙션을 기본 지원합니다.

• 멀티 선택 및 토큰화 처리

  ComboBox와 Tokenizer는 다중 선택 항목을 토큰 형태로 관리할 수 있어 유연한 입력이 가능합니다.

Components

List

List 컴포넌트는 대용량 데이터를 효율적으로 표시하고 관리하는 UI 컴포넌트입니다. 성능 최적화를 위해 전체 데이터를 한 번에 렌더링하지 않고, 사용자의 뷰포트에 보이는 항목만 동적으로 렌더링합니다.

• 가상 스크롤: 많은 데이터를 효율적으로 처리하기 위해 현재 화면에 보이는 데이터만 동적으로 렌더링하여 성능을 향상시킵니다.
• 커스텀 렌더러: 데이터를 원하는 형태로 렌더링할 수 있습니다.
• 행 개수 지정: 한 번에 화면에 표시할 행의 개수를 설정할 수 있습니다.
• 외부 스크롤러: 리스트 자체뿐만 아니라, 리스트를 감싸는 컨테이너(부모 요소)의 스크롤을 기준으로 동작할 수 있습니다.
• 상호 작용: 항목 선택, 포커스 등과 같은 사용자 상호 작용을 처리할 수 있습니다.
• 드래그 앤 드랍: 항목을 드래그 앤 드랍하여 순서를 변경할 수 있습니다.

Tree

Tree 컴포넌트는 계층형 데이터를 표시하며 List 컴포넌트의 특성을 상속하는 UI 컴포넌트입니다. 트리 구조의 데이터를 효과적으로 관리하고 사용자 상호작용을 제공합니다.

• 가상 스크롤: 많은 데이터를 효율적으로 처리하기 위해 현재 화면에 보이는 데이터만 동적으로 렌더링하여 성능을 향상시킵니다.
• 커스텀 렌더러: 트리 아이템을 원하는 형태로 렌더링할 수 있습니다.
• 행 개수 지정: 한 번에 화면에 표시할 행의 개수를 설정할 수 있습니다.
• 외부 스크롤러: 리스트 자체뿐만 아니라, 리스트를 감싸는 컨테이너(부모 요소)의 스크롤을 기준으로 동작할 수 있습니다.
• 상호 작용: 노드 선택, 포커스 등과 같은 사용자 상호 작용을 처리할 수 있습니다.
• 노드 확장/축소: 트리 노드를 확장하거나 축소할 수 있습니다.
• 자동 노드 확장: 조건에 따라 노드를 자동으로 확장할 수 있습니다.
• 전체 노드 탐색: 트리 전체를 탐색할 수 있는 기능을 제공합니다.
• 부모, 형제 노드 접근 및 노드 추가/삭제: 부모 노드와 형제 노드에 접근하고 노드를 추가하거나 삭제할 수 있습니다.
• 드래그 앤 드랍: 항목을 드래그 앤 드랍하여 노드의 순서를 변경하거나 항목을 다른 부모 노드 아래로 이동시킬 수 있습니다.

Popup

Popup 컴포넌트는 화면의 지정된 위치에 콘텐츠를 동적으로 표시하는 컴포넌트입니다. 지정된 타겟 위치에 모달, 툴팁, 드롭다운 메뉴 등의 다양한 팝업 형태로 콘텐츠를 생성하고 표시하는 데 사용됩니다.

• 지정 엘리먼트(앵커)에서 팝업 띄우기: 특정 DOM 요소에서 팝업을 띄울 수 있습니다.
• 앵커 이벤트 발생 시 팝업 띄우기: 마우스 오버나 클릭 시 팝업을 띄울 수 있습니다.
• 모달: 배경을 흐리게 하여 팝업을 강조할 수 있습니다.
• 팝업의 컨텐츠 좌표 시스템: 팝업의 위치를 앵커 요소나 화면 기준으로 설정할 수 있습니다.
• 중첩 팝업: 팝업 안에 또 다른 팝업을 띄울 수 있습니다.
• 우선 순위: 팝업의 우선 순위를 설정할 수 있습니다.
• 외부 영역 클릭 시 닫기: 팝업 외부를 클릭하면 팝업이 닫힙니다.
• ESC 키로 닫기: ESC 키를 누르면 팝업이 닫힙니다.
• Auto Focus: 팝업이 열릴 때 자동으로 포커스를 설정할 수 있습니다.
• 위치 자동 보정: 팝업이 화면 바깥으로 나가지 않도록 위치를 조정합니다.

AutoComplete

AutoComplete 컴포넌트는 사용자가 입력한 텍스트를 기반으로 관련 추천 항목을 실시간으로 제안하는 기능을 제공합니다. 입력을 빠르게 완성할 수 있도록 도와주며, 검색 기능이 필요한 곳에서 유용하게 사용할 수 있습니다.

• 커스텀 렌더러: 제안 목록 아이템을 사용자 정의할 수 있습니다.
• 최소 문자열 지정: 입력을 시작할 최소 문자열 길이를 설정할 수 있습니다.
• 제안 목록 설정: 입력에 기반한 제안 목록을 구성할 수 있습니다.
• 플로팅 레이블 및 placeholder: 입력 필드에 레이블과 placeholder를 설정할 수 있습니다.
• 제안 목록 상태 처리: 제안 목록 로딩 중 및 데이터가 없을 때의 상태를 처리할 수 있습니다.
• 제안 목록 컨테이너 제어 : 자동 및 수동 닫기

Tokenizer

Tokenizer 컴포넌트는 입력 필드에서 여러 개의 값을 동시에 처리하고 관리할 수 있도록 도와주는 컴포넌트입니다. 사용자가 값을 입력할 때마다 각 항목이 개별 "토큰"으로 분리되어 컬렉션 형태로 관리됩니다. 이메일 주소 입력, 태그 입력, 수신자 목록 관리 등 여러 개의 값을 한 번에 입력하고 관리해야 하는 상황에서 유용하게 활용됩니다.

• 커스텀 렌더러: 토큰 및 제안 목록 아이템을 사용자 정의할 수 있습니다.
• 최소 문자열 지정: 입력을 시작할 최소 문자열 길이를 설정할 수 있습니다.
• 제안 목록 설정: 입력에 기반한 제안 목록을 구성할 수 있습니다.
• 플로팅 레이블 및 placeholder: 입력 필드에 레이블과 placeholder를 설정할 수 있습니다.
• 제안 목록 상태 처리: 제안 목록 로딩 중 및 데이터가 없을 때의 상태를 처리할 수 있습니다.

ComboBox

ComboBox 컴포넌트는 드롭다운 형태로 표시되는 항목 목록에서 원하는 항목을 선택하는 기능을 제공하는 UI 컴포넌트입니다. 사용자는 목록에서 직접 항목을 선택하거나, 필터링 기능을 사용하여 원하는 항목을 빠르게 찾을 수 있습니다.

• 커스텀 렌더러: 목록 아이템을 사용자 정의할 수 있습니다.
• 플로팅 레이블 및 placeholder: 입력 필드에 레이블과 placeholder를 설정할 수 있습니다.
• 멀티 선택:다중 항목을 선택할 수 있으며, 선택된 항목은 토큰 형태로 렌더링합니다.
• 항목 필터링: 입력값에 따라 제안 목록이 동적으로 필터링합니다.
• 드랍다운 컨테이너 제어: 자동/수동 닫기가 가능합니다.

DateChooser

날짜를 표시하는 컴포넌트입니다. 일반적으로 캘린더 형태의 인터페이스를 제공하고, 사용자는 거기서 특정 날짜를 클릭하여 선택할 수 있습니다.

• 커스텀 렌더러: 각 날짜 셀을 원하는 형태로 커스터마이징할 수 있습니다.
• 일/월/년 달력: 연, 월, 일 단위로 달력을 전환하여 빠르게 탐색할 수 있습니다.
• 날짜 포맷: moment, dayjs 등 외부 라이브러리를 이용한 날짜 포맷 지정이 가능합니다.
• 헤더 포맷: 달력 상단 헤더의 포맷을 사용자 정의할 수 있습니다.
• 기간 선택: 단일 날짜 선택 외에도 시작일과 종료일을 지정하는 기간 선택이 가능합니다.
• 선택 가능 날짜 지정: 선택할 수 있는 날짜를 조건 또는 배열로 지정할 수 있어, 특정 날짜만 선택 가능하도록 제한할 수 있습니다.

DatePicker

드랍다운에 표시되는 날짜를 선택하고 표시하는 컴포넌트입니다. 일반적으로 캘린더 형태의 인터페이스를 제공하고, 사용자는 거기서 특정 날짜를 클릭하여 선택할 수 있습니다.

• 커스텀 렌더러: 각 날짜 셀을 원하는 형태로 커스터마이징할 수 있습니다.
• 일/월/년 달력: 연, 월, 일 단위로 달력을 전환하여 빠르게 탐색할 수 있습니다.
• 날짜 포맷: moment, dayjs 등 외부 라이브러리를 이용한 날짜 포맷 지정이 가능합니다.
• 헤더 포맷: 달력 상단 헤더의 포맷을 사용자 정의할 수 있습니다.
• 기간 선택: 단일 날짜 선택 외에도 시작일과 종료일을 지정하는 기간 선택이 가능합니다.
• 선택 가능 날짜 지정: 선택할 수 있는 날짜를 조건 또는 배열로 지정할 수 있어, 특정 날짜만 선택 가능하도록 제한할 수 있습니다.