리액트 useReducer 사용예제 오류

Question

"실전 리액트 프로그래밍"에 있는 useReducer 예제(코드 4-33)인데요. 카운트다운 같은 겁니다. 1초마다 숫자가 줄어드는...useEffect안에서 setInterval 을 설정할 때 useState를 사용하는 경우 의존성 배열에 상태를 추가해야 해서 렌더링될 때마다 매번 setInterval 이 등록되고 해제되는 비효율적인 면이 생깁니다.그래서 이것을 useReducer 를 사용해서 상태변경 디스패치만 하면 의존성 배열을 제거할 수 있다라는 취지의 예제입니다. 그런데 useEffect 에서 의존성 배열을 아예 없애버리면 렌터링할 때마다 실행되는데... 문제는 그런 경우 useState 와 똑같이 setInterval 도 매번 등록과 해제를 반복합니다. 그래서 의존성 배열을 제거하는게 아니라 빈 배열 [ ] 을 전달해주는 것이 맞을 것 같은데...아래는 단순화시킨 예제입니다.const initialState = {value: 10} const reducer = (state) => { return { ...state, value: state.value>0?state.value-1:state.value }; } function Timer(){ const [state, dispatch] = useReducer(reducer, initialState); useEffect(()=>{ const id = setInterval(dispatch, 1000); return ()=> clearInterval(id); }); // 여기서 빈 배열을 넘겨주어야 올바르게 동작하지 않을지? return ( <>

{state.value}

); }

장발주호민 · Accepted Answer

네 빈 배열을 넘겨주는게 맞습니다

리액트 useReducer 사용예제 오류

1개의 답변

#useeffect 목록