개요

구현 중인 프로젝트에는 관리자 페이지가 있습니다.

그 기능 중, 환불 요청된 주문을 처리하는 것이 있는데

반품 처리 진행시 서버에서 true 응답을 보내면

위의 Refund Request 아래 표시되는 리스트를 갱신해줘야합니다.

1. 페이지가 렌더링될 때 refund list를 받아온다.
2. 렌더링된 각각의 리스트를 클릭하면 세부 정보가 출력된다.
3. 처리 버튼을 누르면 status에 따라 맞는 alert가 표시된다.
4. alert가 표시된 이후, 리스트를 다시 받아 렌더링한다.

4번에서 Refund Request 영역의 모든 child node를 삭제할 필요가 있었는데

계속 Vanilla JS 방식으로 접근하다가... React 메서드를 써본 순간

'유레카!' 를 외친 포스팅입니다.

Code flow

위의 gif는 다음과 같은 순서로 동작합니다.

1. 초기 렌더링시, refund list가 서버에 요청되어 상태로 저장된다.
2. list의 상태 변화를 감지하는 useEffect가 ReactDOM.render를 수행하여 출력시킨다.
3. 각 li를 누르면 order의 세부정보가 출력된다.
4. 환불 신청을 클릭하면 '/api/recallRequest'가 수행된다.
5. 먼저 removeAllChildNodes가 수행되고
6. 마지막으로 다시 refund list를 세팅한다.
7. refund list 값의 변화가 감지되어 ReactDOM.render가 수행된다.

Vanilla JS 관점

위의 경우가 처음 작성한 자식 노드 제거 함수입니다만,

이 경우엔 다음과 같은 오류가 발생합니다.

it looks like the React-rendered content of this container was removed
without using React. This is not supported and will cause errors.
Instead, call ReactDOM.unmountComponentAtNode to empty a container

'React 기반 컨텐츠가 React를 사용하지 않고 제거된 것 같습니다!'
'이것은 지원되지 않으며 오류를 발생시킵니다'
'대신, ReactDOM.unmountComponenetAtNode'를 사용하세요'

Using ReactDOM

위의 오류에 따라 작성한 다음

재차 진행해보니 정상적으로 동작합니다!

React official docs

참고 링크 : https://ko.reactjs.org/docs/react-dom.html#unmountcomponentatnode

마무리

조금만 더 읽었더라면 1분이면 해결됐을텐데

n시간을 잡아먹은 오류였습니다. 😂

몇 달동안 React를 가지고 놀면서 꽤 익숙해졌나? 싶었지만

여전히 익숙한 방법으로만 할려고 하는구나... 하면서 반성하며

아직도 남아있는 포스팅할 거리들을 찾아다녀야겠습니다!