[ React ] 내가 작성한 글/댓글/공감 수정, 삭제, 취소하기

프로젝트 진행 중 게시판을 만들면서 내가 작성한 글, 댓글, 공감에 대해서만 수정, 삭제 기능을 이용하는 방법을 구현해본 것에 대해 정리한다.

게시물에 대한 권한을 확인하는 속성

내가 작성한 글 or 댓글에만 수정, 삭제 버튼을 렌더링 해주기 위해서 클라이언트는 사용자의 토큰 정보를 헤더에 담아 서버에 전달함으로서 게시물에 대한 권한을 확인하여야 한다.

게시물은 비로그인 사용자도 볼 수 있어야하기 때문에 토큰이 전송될 때와 전송되지 않을 경우 2가지를 고려하여 구현하였다.

• 요청 헤더에 사용자의 토큰을 담아 axios를 이용하여 현재 게시물의 정보를 가져올 수 있는 api를 호출한다.

사용자의 권한이 확인되면 서버는 아래 JSON 구조와 같이 응답 데이터에 게시물에 대한 정보와 함께 권한을 확인할 수 있는 editable 속성을 포함하여 전달하도록 구현하였다. 멘토님의 조언을 토대로 서버와 상의하여 데이터의 필드를 설계하였고 실제로 서버에서 받은 응답 데이터의 모습이다.

댓글, 공감 컴포넌트도 동일하게 각 아이템마다 editable 속성을 통해 권한을 확인하면서 특정 이벤트 실행 가능 여부를 판단하도록 했다.