2023-04-21 금요일

✏️ 무엇을 배웠나

1. useEffect 무한 실행 원인

사용자가 저장한 상태를 로컬 스토리지에 저장해서 브라우저를 껐다 켰을 때 마지막으로 저장한 상태로 렌더링되도록 하기 위해서 useEffect와 로컬 스토리지를 사용했다.

여기서 무한 실행 발생.

요즘 리액트의 새로운 공식 문서에 트러블슈팅이 잘 정리되어 있어서 useEffect 트러블슈팅을 찾아봤다.

문제는 useEffect 내에서 상태를 변경하고 있는데 의존성 배열 안에 해당 상태가 들어 있어서 그랬다.

리액트 : "상태가 변경되면 리렌더링 할 거임"
useEffect : "의존성 배열에 들어 있는 의존성 변경되면 내부 로직 실행할 거임"

이 2가지가 합쳐져서 무한 실행이 된 거였음.

🏷️ 오늘의 코멘트

react.dev 문서 트러블슈팅 부분 너무 좋다