자, 지난 강의에서
함수를 useEffect의 종속성으로서
추가할 경우에 어째서
무한 루프를 발생 시키게 되는 지에 대해 설명했습니다
지난 강의에서 아주 자세하게
설명 드렸던 것처럼 이는 정말 문제가 되겠죠
하지만 감사하게도
이 문제의 해결책은 간단명료합니다
왜냐하면, React에 함수가 항상 재-생성되지 않도록 하기 위해
사용할 수 있는 hook이 제공되기 때문입니다
여기에 생기는 이 문제를 해결하기 위해
이 특수한 hook을 사용하는 것을 권장 드립니다
자, 이 특수한 hook은
useCallback hook입니다
이는 React에 탑재된 또 다란 hook입니다
이 hook의 원리는
이 경우에선 여기 handleRemovePlace 함수를
이 hook 안에 넣어주면 된다는 겁니다
이를 위해, useCallback을 실행합니다
그 다음 둘러 쌓여야 하는 이 함수를
useCallback으로 첫 번째 argument로서 보내줍니다
그러고 나서 useCallback에 두 번째 argument로서
종속성 array를 넣어줍니다
이 방식은 useEffect랑 비슷해 보이실 겁니다
잠시 후에 이 array대해 더 설명해드리겠습니다
왜냐하면 useCallback은 다른 역할이 있기 때문입니다
value를 return하기 때문입니다
둘러 싸둔 함수를 return하는데요 주변 컴포넌트 함수가
다시 실행되는 경우마다
재-생성되지 않는 방식으로 말이죠
useCallback이 있다면 React는
안 쪽에 있는 함수가 재-생성되지 않게 해줍니다
대신에, 메모리로서 내부에 저장합니다
그리고 해당 컴포넌트 함수가 다시 실행될 때마다
메모리로서 저장된 그 함수를 재-사용합니다
그래서 이제 재-생성되지 않을 것이니
지금까지 내용을 저장하고 다시 불러와서 로딩 될 때 까지 기다립니다
그리고 element를 추가하고 이 modal을 열어줍니다
이제 타이머가 설정된 게 보이지만 다시 설정되지 않습니다
modal은 아직 사라지지는 않습니다
해당 코드는 아직 고치지 않아서 그렇지만 더 이상 무한 루프는 없습니다
그래서 이것이 왜 useEffect로 함수를 종속성으로서
넘기는 경우에 useCallback을 사용해야 하는 이유입니다
그러나, 종속성에 대해선, useCallback은 실질적으로
종속성 array를 하나 가졌었죠
그리고 이 종속성 array는 당연하게도
useEffect의 종속성 array처럼 작동하게 됩니다
여기에 저기 들어가 있는 함수 안에 사용되는
prop또는 state value값이 뭐든 추가해주시면 됩니다
그리고 여기 이 경우에는, 필요하지는 않습니다
추가될 필요가 없는 state 업데이트 함수를 사용하고 있습니다
그리고 local storage와 같은
브라우저 기능을 쓰고 있죠
또, 추가될 필요가 없는 이 JSON 객체를 쓰고 있습니다
이 객체는 이 컴포넌트가 다시 렌더링 되도록
하는 것과 같은 작용을 하지 않기 때문입니다
이 곳에는 그저 prop이나 state value값만이 추가 되어야만 합니다
그러므로 빈 array로 놔둬도 상관없겠고요
그리고 useEffect와 같게도
React는 이제 종속성이 바꼈을 경우에
useCallback 내의 함수 만들 재-생성하게 됩니다
그러나, 텅 빈 종속성 array를 가졌다면
변경될 일이 없습니다
그렇기에 해당 함수는 재-생성되지 않겠죠
이제 setModalIsOpen call을 다시 작성합니다
그래서 modal이 삭제 되도록 말이죠
그러나 useCallback은 유지할 것입니다
왜냐면 이것이 추가적인 안정성을 제공하기 때문입니다
무한 루프를 발생 시키지 않도록 말이죠