[React]리액트 메신져 멘션/언급 기능 구현
2021. 4. 21. 01:28ㆍWeb_Programming/React
메신져 프로젝트를 진행하면서 사용자들을 언급하는 기능이 있다면 좋겠다 생각했어요ᓚᘏᗢ
트윗을 보낼 때 @를 이용해서 사용자 ID를 언급한다면 상대방의 알림창에 해당 트윗내용이 보여지게 구현했습니다.
먼저 구현한 부분들을 보여드릴게요 .
기본적인 구현 내용은 "@와 이어붙은 문자열을 멘션내용으로 다룬다!"에요.
좀더 코드적으로 분석해보면 입력받은 문자열에서 @가 포함되어있는 문자열을 걸러내어 @만 잘라내면 됩니다.
좀 황당할 정도로 간단합니다.. ㅎ
세부적인 내용은 코드로 살펴보면서 설명하겠습니다 :D:D
import { dbService, storageService } from 'fbase';
import React, { useState } from 'react';
import TextareaAutosize from "react-textarea-autosize";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faAt } from "@fortawesome/free-solid-svg-icons";
const MessForm = ({ userObj }) => {
const [mention, setMention] = useState("");
const onSubmit = async (event) => {
event.preventDefault();
if (mention) {
//멘션내용 처리
}
setMention("");
}
const onChange = (event) => {
const { target: { value } } = event;
if (value.search("@") != -1) {
const ment = value.split(" ").filter(it => it.includes("@")).toString();
setMention(ment.substring(ment.search("@") + 1, ment.length));
}
}
const onMentionClick = () => {
setmess(mess + "@");
}
return (<>
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /></head>
<form onSubmit={onSubmit}>
<div>
{mention && <div className="mention"><span>To : <FontAwesomeIcon icon={faAt} id="at" /> {mention}</span></div>}
<span onClick={onMentionClick} id="addMention"><FontAwesomeIcon icon={faAt} id="at" /></span>
<TextareaAutosize id="messText" value={mess} onChange={onChange} type="text" placeholder="What are you doing?" />
<input id="messSubmit" type="submit" value="" />
</div>
</form>
</>
);
}
export default MessForm;
전체적인 코드는 위와 같고 이 중 onChange함수를 먼저 살펴보겠습니다.
const [mention, setMention] = useState("");
const onChange = (event) => {
const { target: { value } } = event;
if (value.search("@") != -1) {
const ment = value.split(" ").filter(it => it.includes("@")).toString();
setMention(ment.substring(ment.search("@") + 1, ment.length));
}
}
입력받는 TextArea에서 사용되는 onChange함수로 입력이 수행되면 해당 event로부터 값인 value를 받습니다.
해당 value에서 value.search("@")를 수행하면 @가 존재하는 해당 문자열의 인덱스를 반환해줍니다.
존재하지 않을 경우 -1을 반환합니다.
따라서 해당 값이 -1이 아니라면(@가 존재한다면)
- value값을 공백으로 split해줍니다.
- filter함수를 통해 it.includes("@")가 만족하는 원소들만 추출합니다.
- 해당 원소를 문자열로 변환시켜줍니다.
여기서 mention hook에 문자 "@"를 제외한 그 이후 문자열을 저장해줍니다.
const onSubmit = async (event) => {
event.preventDefault();
if (mention) {
//멘션내용 처리
}
setMention("");
}
input 내용을 submit할 때 적용되는 onSubmit함수에서 mention을 DB에 넣든 원하는 처리를 수행하는 코드를 입력해주면 됩니다.
포스팅 마치겠습니다 💙
반응형
'Web_Programming > React' 카테고리의 다른 글
| [React]구글 Oauth2 로그인 구현 with TypeScript (0) | 2021.06.09 |
|---|---|
| [React] 카카오 Map _지도 생성, 현 위치 재검색 구현 (+카카오 로컬 API) (4) | 2021.05.30 |
| [React]리액트 다음 우편번호 검색 (4) | 2021.05.29 |
| [React]리액트 훅, 외부클릭 감지 모달창 구현 (0) | 2021.04.18 |
| [React] 아이디 중복확인 (with. firebase) (0) | 2021.04.18 |