지난 강의에서 setInterval을 올바르게 사용하기 위해
useEffect가 필요한 이유에 대해 설명드렸습니다
그리고 interval을 삭제하는 이유가
생소한 버그 등을 방지하기 위함이 아니라
해당 앱의 성능에 영향을 주지 않도록
하기 위한 것이라고 언급했습니다
그리고 앱의 성능에 대해 얘기가 나와서 드리는 말씀인데
이 앱에서 최적화 될 수 있는 것이 있습니다
지금 시점에서는
interval을 deleteConfirmation 컴포넌트에서
관리하고 있습니다
그리고 이 interval에서 상태를 매 10 밀리초마다
업데이트 중인데, 이는 즉 해당 컴포넌트가
10 밀리초마다 작동한다는 것이고
이는 매 10 밀리초마다 리액트가
여기 있는 onConfirm 값을 비교하여
Effect 함수의 재실행 여부를 알아봐야 한다는 것입니다
또 리액트는 이 JSX 코드 전체를 확인해야 합니다
요즘 성능의 컴퓨터로는 과도한 작업이 아니므로
속도가 많이 느려지지는 않지만 더 최적화할 수 있는 부분입니다
여기 있는 진행 표시줄과 연관된 상태 로직, 그리고
useEffect 훅을 각각의 컴포넌트에
내보내는 것이 더 낫습니다
그렇게 하면 여기 있는 단 하나의 컴포넌트만이
늘 재실행됩니다
그것을 위해 여기에 새로운 컴포넌트를 추가하겠습니다
ProgressBar로 이름을 지어도 좋습니다
그리고 이 곳으로 내보내겠습니다
그리고 이 컴포넌트에서
이 상태를 관리하도록 하겠습니다
그래서 이걸 복사해서 여기로 옮겨오겠습니다
물론 이 useEffect 훅도 필요합니다
복사나 잘라내기를 사용해도 됩니다
그리고 deleteConfirmation으로부터 이 상태 또한 삭제해서
ProgressBar로 추가해 줍니다
그리고 이 progress 요소를 반환해서
deleteConfirmation으로부터 삭제해 줍니다
그리고 대신에 여기에 반환하겠습니다
이제 리액트로부터 useState와
useEffect를 가져와야 합니다
여기에서 사용해야 하고
설정해 뒀던 TIMER가 필요하기 때문입니다
그리고 다시 그것을 상수값으로 정의하거나
아니면 간단하게 속성으로 받아와도 됩니다
타이머를 여기에 두고
그리고 이제 deleteConfirmation 컴포넌트에
진행 표시줄을 사용할 수 있습니다
그러기 위해선 import를 사용해서
ProgressBar.jsx 파일로부터 가져오겠습니다
그리고 여기서 useState import를 없애도 됩니다
이렇게 진행하시면, deleteConfirmation 컴포넌트 전체가
매 10 밀리초마다 재실행되지 않게 되고
대신에, ProgressBar 컴포넌트 내에서
모든 작업이 실행됩니다
그리고 이것이 여러분이 고려해 볼만한 최적화 과정입니다
이로 인해 불필요한 계산 과정을 피할 수 있게 됩니다
이제는 이 타이머 속성을 위한
값을 전달하도록 하겠습니다
그를 위해 여기 DeleteConfirmation에서
타이머를 TIMER와 일치하도록 설정합니다
그렇게 저장을 해주고 돌아가서
앱을 다시 불러오고 장소를 추가해서
장소를 클릭하면, 삭제가 잘 됩니다
타이머도 잘 보입니다
다른 장소를 삭제해 보면
새로운 모달에서 새로운 타이머가 시작됩니다
의도한 대로 모두 잘 작동합니다