useEffect 정리하기(2) useEffect 사용 시 주의사항 useEffect의 의존성 배열 관리 useEffect의 두 번째 인자로 전달되는 의존성 배열은 이 배열의 유무, 배열의 값 존재 유무, 배열의 값 변경 여부에 따라 effect를 재 실행하기 때문에 의존성 배열의 잘못된 지정, 누락 등과 같은 실수가 있다면 컴포넌트가 렌더링 될 때마다 실행될 수 있는 문제가 발생한다. 무한 루프 방지 function Counter() { const [count, setCount] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCount(count + 1); // You want to increment the counter every second.... useEffect 정리하기 (1) React를 공부하면서 useEffect에 대해 알고 있다고 생각했는데 간단한 프로젝트를 진행하면서 막혔던 부분 중 하나가 바로 useEffect였다. 그래서 다시 한번 정리하고 정확히 알아보려고 한다. 문제 그렇다면 왜 useEffect를 다시 공부하는가? 어떤 부분에서 막혔는가?에 대해 말하자면 react-router-dom의 createBrowserRouter를 사용하면서 막혔다. 사용자 인증 여부를 검사하는 AuthenticatedRoute를 만들면서 사용자 인증이 있다면 outlet을 통해 children에 접근이 가능해야 하는데 계속 Navigate 로 리다이렉션 되는 문제가 발생했다. import { Navigate, Outlet } from "react-router-dom"; import .. 이전 1 다음