React : 댓글 수정,삭제 모달폼 - useRef,useOnclickOutside, useClickAway(useHooks)

현재 댓글 컴포넌트는 이런 상황이다.

 

1. 먼저 ··· 버튼을 눌렀을 때  수정, 삭제 버튼이 있는 모달 폼을 열어줘야한다.

모달 폼의 css는 아래와 같다.

2. 만약 다른 곳을 클릭했을 때 모달폼이 다시 닫히도록해야하는데 이때 useHooks인 useOnclickOutside를 사용한다.

 

useOnclickOutside 사용방법

1. useRef를 이용해서 만약 클릭이벤트가 useRef로 지정한 컴포넌트나 useRef에 포함된 컴포넌트라면 return

 

2. 만약 다른 것을 클릭했을 때 handler함수실행

3. 이 useEffect이벤트가 계속 발생될 수 있도록 mouseDown이나 touchStart를 계속 실행시켜준다.

 -touchstart는 모바일에서 발생하는 이벤트

 - 이 이벤트가 계속 실행되면서 이벤트가 useRef 컴포넌트면 무시하고, 다른 컴포넌트면 handler을 실행해서 모달폼을 닫히게함

4.useRef를 모달폼에 지정해줌

3. 댓글을 작성한 본인만 수정삭제가 보이게 하기

1.리덕스에서 useSelector로 로그인한 사용자 데이터 가져오기

2. 댓글 작성자의 uid와 현재 로그인한 유저의 uid가 같으면 모달 폼을 볼 수 있음

📝추가적인 부분

1. useOnclickOutside 부분이 구글에 검색해보니 없어지고 useClickAway가 생겼다.

https://usehooks.com/useclickaway

useClickAway React Hook – useHooks

npm i @uidotdev/usehooks

1. useHooks설치

2.useClickAway를 import

3.아래와 같이 useClickAway선언과 모달폼을 여는 함수 생성

-아마 useClickAway가 ref로 지정된 컴포넌트가 아니면 setModalFlag를 false로 바꾸는거 같다.

4. 아래와 같이 값과 함수를 넣어줌