문제에 대한 한줄 요약

• Problem - 현재 어떤 문제, 혹은 질문이 있는지
• Reason - 해당 Problem의 이유, 문제가 되는 사유가 무엇인지
• Try to solve - 문제를 해결하기 위해 어떤 시도를 했고, 조사한 사항은 어디까지인지 ( 중요 )
• ( Option ) Alternative - 문제를 해결하지 못할 경우의 대안

#1

• Problem : 요소 클릭 시 변경된 status를 서버로 전송할 때 초기값인 공백(””)이 전달되는 문제
• Reason
  • setState가 state 업데이트를 완료하기 전에 mutate 함수 실행
  • useEffect가 dependency인 state의 업데이트 시 뿐 아니라 컴포넌트 mount할 때도 실행
  • 불필요한 리렌더링
• Try to solve
  • setState 다음이 아닌 useEffect에서 해당 state가 업데이트 될 때마다 mutate함수가 실행되도록 재구성
  • useRef를 사용해 mount 이후 dependency 업데이트 시에만 함수 실행
  • React.StrictMode 삭제

#2

• Problem : 페이지가 비슷한 형식인데 컴포넌트를 재사용할 수 없는 문제
• Reason : 재사용성을 고려하지 않은 설계
• Try to solve : props를 넘겨주어 조건에 따라 렌더링하도록 페이지 및 테이블 컴포넌트 재작성