Tribute.js는 웹에서 @멘션 기능을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 사용자가 특정 문자를 입력할 때, 해당 문자에 맞는 추천 목록(예: 사용자 목록)을 표시해주고, 그 중 하나를 선택할 수 있는 기능을 제공합니다. 주로 채팅 또는 댓글 시스템에서 사용자의 이름이나 태그를 입력할 때 편리하게 사용됩니다.
기본 동작
- 사용자가 @를 입력하면, 미리 정의된 리스트(예: 사용자 목록)에서 해당하는 항목들이 자동으로 제안됩니다.
- 사용자가 제안된 목록 중 하나를 선택하면, 텍스트에 해당 항목이 삽입됩니다.
- 이 라이브러리는 텍스트 영역, 인풋 필드, 또는 WYSIWYG 편집기와 함께 사용할 수 있습니다.
예시
간단한 예제를 통해서 사용 방법을 설명하겠습니다. @아이콘 버튼을 누르면 멤버 리스트가 뜨는 기능을 함께 추가해보겠습니다.
1. 기본 Tribute.js 설정
먼저 Tribute.js를 설정하여 멘션 기능을 적용해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute.js Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.css">
</head>
<body>
<div>
<button id="mentionButton">@ Mention</button>
<textarea id="mentionArea" rows="5" cols="50"></textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.js"></script>
<script>
// 멤버 리스트 정의
const members = [
{ key: 'John Doe', value: 'john_doe' },
{ key: 'Jane Smith', value: 'jane_smith' },
{ key: 'Alice Johnson', value: 'alice_johnson' }
];
// Tribute 객체 생성
const tribute = new Tribute({
values: members,
selectTemplate: function(item) {
return `@${item.original.key}`; // 멤버 선택 시 텍스트로 표시될 형식
}
});
// textarea에 Tribute.js 적용
tribute.attach(document.getElementById('mentionArea'));
// 버튼을 눌렀을 때 @ 트리거 발생시키기
document.getElementById('mentionButton').addEventListener('click', () => {
const mentionArea = document.getElementById('mentionArea');
mentionArea.focus();
mentionArea.value += '@'; // @을 텍스트에 추가하고 Tribute가 작동하도록
mentionArea.dispatchEvent(new Event('input')); // input 이벤트를 트리거하여 리스트 표시
});
</script>
</body>
</html>
2. 코드 설명
- Tribute 객체 생성: 멤버 리스트를 정의하고, key와 value를 포함하는 객체 배열을 제공합니다. key는 보여지는 이름이고, value는 해당 항목에 대한 고유값입니다.
- selectTemplate: 사용자가 목록에서 항목을 선택했을 때, 텍스트에 어떻게 나타날지를 정의합니다. 여기서는 @ 뒤에 멤버의 이름이 추가되도록 설정했습니다.
- 버튼 이벤트: @ Mention 버튼을 눌렀을 때, @ 문자를 텍스트에 추가하고 input 이벤트를 트리거해서 멤버 리스트가 나타나도록 구현했습니다.
이 방식으로, @ 아이콘 버튼을 눌렀을 때 멤버 리스트를 팝업 형식으로 나타낼 수 있습니다.
React이라면?
React에서 Tribute.js를 사용하여 @아이콘 버튼을 눌렀을 때 멤버 리스트가 뜨는 기능을 구현할 수 있습니다. 다음은 React에서 이를 적용하는 방법입니다.
React에서 Tribute.js 사용 예시
- Tribute.js를 설치합니다.
npm install tributejs
- React 컴포넌트로 구현하기
import React, { useRef, useEffect } from 'react';
import Tribute from 'tributejs';
import 'tributejs/dist/tribute.css';
const MentionComponent = () => {
const textareaRef = useRef(null);
const tributeRef = useRef(null);
// 멤버 리스트 정의
const members = [
{ key: 'John Doe', value: 'john_doe' },
{ key: 'Jane Smith', value: 'jane_smith' },
{ key: 'Alice Johnson', value: 'alice_johnson' }
];
useEffect(() => {
// Tribute.js 설정
tributeRef.current = new Tribute({
values: members,
selectTemplate: function (item) {
return `@${item.original.key}`;
}
});
// Tribute.js를 textarea에 연결
if (textareaRef.current) {
tributeRef.current.attach(textareaRef.current);
}
return () => {
// 컴포넌트 언마운트 시 연결 해제
if (tributeRef.current) {
tributeRef.current.detach(textareaRef.current);
}
};
}, [members]);
// 버튼 클릭 시 @ 추가하고 Tribute 리스트 표시
const handleMentionClick = () => {
const textarea = textareaRef.current;
if (textarea) {
textarea.focus();
textarea.value += '@';
textarea.dispatchEvent(new Event('input')); // input 이벤트 트리거
}
};
return (
<div>
<button onClick={handleMentionClick}>@ Mention</button>
<textarea ref={textareaRef} rows="5" cols="50" />
</div>
);
};
export default MentionComponent;
주요 부분 설명
- Tribute.js 초기화: useEffect 훅을 사용하여 Tribute.js를 설정하고, 멤버 리스트(members)를 값으로 전달합니다.
- textarea 연결: tributeRef를 사용해 Tribute.js 객체를 생성하고, textareaRef를 통해 textarea에 붙입니다.
- 버튼 클릭 이벤트: 버튼을 누르면 textarea에 @ 문자를 추가하고 input 이벤트를 트리거하여 멤버 리스트가 표시되도록 합니다.
- 컴포넌트 언마운트 시 정리: useEffect의 return 구문을 통해 컴포넌트가 언마운트될 때 Tribute.js 연결을 해제합니다.
이 코드로 React에서 Tribute.js를 사용하여 @아이콘 버튼을 누르면 멤버 리스트가 표시되는 기능을 쉽게 구현할 수 있습니다.
'React > React 실습' 카테고리의 다른 글
| [React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 (0) | 2025.02.04 |
|---|---|
| [React] Drawer와 Tab, Accordian으로 FAQ 구현하기 (0) | 2025.02.03 |
| [React] KeyDown, KeyUp 한국어 2번? (0) | 2025.02.03 |
댓글