💻 TIL 23.04.18

❗ 문제점

• 삭제 버튼을 눌렀을 때 팝업이 나온다.
• 팝업에서 동의 버튼을 누르면 api.post를 통해 삭제를 요청한다.
• 삭제 요청이 가면 해당 리스트의 삭제 버튼이 사라지고 리스트 상태 : 삭제가 표시되어야 한다.

위 3가지가 내가 현재 만들고 있는 프로세스인데, 1,2번은 잘 작동이 된다. 하지만 re-rendering이 되지 않는 문제를 가지고 있다.

해결 방법 생각

1. 동의 버튼을 누르면 api.post를 보내고 location.reload()를 사용하여 새로고침한다.
2. api.get을 한번 더 실행한다.

우선 데이터를 새로 받기 위해 페이지를 새로 고침하는 것은 사용자로 하여금 많은 불편함을 야기한다. 그래서 제외하고 2번째 방법을 선택했다.

// index.tsx

api.get(apply)
<ApplyProcess/>
applyStudys.map((applyStudy)=>{
	<ApplyStudy applyStudy={applyStudy} />
}
--------------------------------------------

//ApplyStudy.tsx

const ApplyStudy = () => {
	<ApplyStudyList>
		<ApplyTitle>
		</ApplyTitle
		<InnerContent/>
	</ApplyStudyList>
}
function InnerContent(){
	다른 상태들
	<show && <CancleFunction applyStudy = {applyStudy}/>
}
function CancleFunction(){
	<버튼/>
	<팝업/>
}

현재 대략적인 나의 코드이다. 그렇다면 2번 해결책을 하기 위해서는 ApplyStudy.tsx의 function CancleFunction에 있는 팝업에서 동의 버튼을 눌렀을 때 index.tsx의 api.get을 다시 실행해줘야 한다.

이를 위해 나는 처음 팝업에서 동의 버튼을 눌렀을 때 canclefunction에서 api.get을 실행시켰다. 당연하게도 re-rendering은 실행되지 않았다. 왜냐하면 부모에서 내려온 props를 자식에서 다시 get한다고 해서 redering이 되는 것이 아니기 때문이다.

그래서 나는 생각을 해봤다. 어떻게하면 부모에서 동의 버튼을 눌렀다는 것을 인지하고 다시 렌더링할 수 있을까?

=> 고민에 대한 답을 생각하는데 시간이 걸렸지만, 만약 ApplyStudy에 refresh 함수를 내려주고 해당 함수를 동의 버튼을 눌렀을 때 실행시키면 되지 않을까?라는 생각을 하였고, 해당 생각을 통해 문제를 해결했다.

refresh 코드는 이렇다

  const refreshStudyStatus = async () => {
    const refreshStudy = await api.getApplyStudy();
    setApplyStudys(refreshStudy);
  };

해당 함수를 통해서 applyStudy를 가져와서 setState를 통해 다시 랜더링하게 되는 것이다.
하지만 다른 문제가 발생했는데, 현재 해결이 된 부분은 MSW을 사용하고 있는 local 환경에서는 해결이 됐지만, 왜그러는지 모르겠는데 배포를 한 뒤, 다시 테스트를 진행해 봤는데 똑같이 렌더링이 다시 되지 않는 문제가 발생했다. 이 부분은 다음 주에 해결해 볼 생각이다.