댓글 리펙토링
사용배경
본인이 올린 댓글은 수정, 삭제를 할 수 있어야 한다. 리펙토링 전에는 수정, 삭제를 할 때 page를 0으로 하여 처음부터 불러오도록 하였는데 이것은 좋지 않은 것 같았다. 그래서 바꾼 컴포넌트만 다시 랜더링 되도록 하였다.
삭제 로직
삭제가 완료되면 모든 컨텐츠를 다시 불러올 필요가 없다.
정상적으로 삭제가 완료되었는지만 확인하고 해당 컴포넌트를 안보이게 재렌더링 하면된다.
deletereflyflg를 자세히 보면 deletereflyflg가 true이면 안보이도록 하였고 false이면 보이도록 하였다. 그러면 deletereflyflg를 설정하는 것을 보자
삭제가 정상적으로 완료되면 deletereflyflg값이 true로 변한 것을 볼 수 있다. 이것은 해당 컴포넌트에 state로 관리되니 변경되면 재 렌더링 된다. 이렇게 하여 삭제를 리펙토링 하였다.
삭제 결과
해당 컴포넌트만 재렌더링되는 것을 볼 수 있다.
수정 로직
수정 오류도 마찬가지다. 정상적으로 수정이 완료되었는지만 확인하고 해당 컴포넌트를 수정한 값으로 재 렌더링하면 된다.
하지만 다른점은 처음 불러올 때와 그 이후로 나누어야 한다는 점이다.
즉 isFirst가 true이면 처음 불러왔을 때(수정이 안 되었을 때)값으로 초기화한다. 반면에 수정 API를 호출하여 정상적인 응답을 받았으면 수정이 되었으므로 isFirst는 false로 바꾼다. 그리고 바뀐 값을 담당하는 inputReplyChange state변수에 저장한다.
State변수가 변경 되었으므로 재렌더링 되고 이제는 inputReplyChange값이 렌더링 될 것이다.
수정 결과
해당 컴포넌트만 렌더링 된다.
