client 코드
mongoDB에 저장된 댓글 client에 가져와서 보여주는 작업
const RepleList = (props) => {
const [repleList, setRepleList] = useState([]);
useEffect(() => {
let body = {
postId: props.postId,
};
axios.post("/api/reple/getReple", body).then((res) => {
if (res.data.success) {
setRepleList(res.data.repleList);
// setRepleList([...res.data.repleList]);
}
});
}, []);
return (
<RepleListDiv>
{repleList.map((list, i) => {
return <RepleContent list={list} key={i} />;
})}
</RepleListDiv>
);
};
server 코드
router.post("/getReple", (req, res) => {
Reple.find({ postId: req.body.postId })
.populate("author")
.exec()
.then((repleInfo) => {
return res.status(200).json({
success: true,
repleList: repleInfo,
});
})
.catch((err) => {
return res.status(400).json({
success: false,
});
});
});
client 코드
댓글(reple) 수정 작업
state 훅을 사용하여 초기값 false로 주고
modalHandler 함수를 만들어서 span태그의 img 클릭시 state가 true로 변하여
모달창을 띄우게 구현
const [modal, setModal] = useState(false);
const modalHandler = () => {
setModal(true);
};
<div className="modalControl">
<span onClick={modalHandler}>
<img
src={correction}
alt="에디트 이미지"
style={{ width: "2vh", opacity: "0.3" }}
/>
</span>
{modal && (
//
<div className="modalDiv" >
<p >수정</p>
<p className="delete" >
삭제
</p>
</div>
)}
이미지 클릭시 수정,삭제 모달창 나타남 확인.
(...)클릭시 모달창 보여주기
모달창 띄우기는 성공했으나 닫는 기능은 useOnClickOutside훅을 사용하여 구현하였습니다.
useOnClickOutside에 인자로 ref, handler를 주어서
useEffect를 사용하여 ref, handler 조건이 변경될 때마다 이벤트 실행.
const ref = useRef();
useOnClickOutside(ref, () => setModal(false));
const useOnClickOutside = (ref, handler) => {
useEffect(() => {
const listener = (event) => {
// console.log(ref);
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener("mousedown", listener);
//모바일
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
//모바일
document.removeEventListener("touchstart", listener);
};
}, [ref, handler]);
};
modalDiv에 ref추가로 구현
...클릭시 모달 창 띄우고 모달창 이외의 모든 곳을 클릭시 창을 닫습니다.
<div className="modalDiv" ref={ref}>
<p onClick={editHandler}>수정</p>
<p className="delete" onClick={deleteHandler}>
삭제
</p>
</div>
useOnClickOutside 참조 https://usehooks-ts.com/react-hook/use-on-click-outside
useOnClickOutside() react hook - usehooks-ts
React hook for listening for clicks outside of a specified element (see useRef ). This can be useful for closing a modal, a dropdown menu etc.
usehooks-ts.com
추가로 댓글 등록한 유저만 댓글 모달기능 사용할 수 있게 추가 작업을 합니다.
댓글 등록한 유저의 uid와 현재 접속한 유저의 uid가 같다면 모달img 노출
{props.list.author.uid === user.uid && (
<div className="modalControl">
<span onClick={modalHandler}>
<img
src={correction}
alt="에디트 이미지"
style={{ width: "2vh", opacity: "0.3" }}
/>
</span>
{modal && (
//
<div className="modalDiv" ref={ref}>
<p >수정</p>
<p className="delete">
삭제
</p>
</div>
)}
</div>
)}
