인프런 커뮤니티 질문&답변

안녕하세요. 선생님.

현재

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

라는 오류가 뜹니다

제가 구현하고자 하는 기능은 로컬스토리지의 storedData가 변할때, todoData를 변화를 주는 것입니다. 의존성 배열을 여러가지로 바꿔보았는데도 제자리 걸음인것 같습니다.

어떻게 해야 로컬스토리지가 변할때, todoData도 변해서 map 렌더링이 또 실행될까요?

const TodoItem = () =>{

   localStorage.setItem('todoData', JSON.stringify(todoItem)) 

   const [state, dispatch] = useReducer(checkReducer, todoItem)
   const [todoData, setTodoData] = useState(todoItem);
   
   const storedData = JSON.parse(localStorage.getItem('todoData'))

   useEffect(()=>{
    if(storedData !== todoItem){ //storedData가 초기값이 아니라면, todoData를 바꿔준다.
      setTodoData(storedData)
    }
   },[storedData]);

   const handleCheck = (id) =>{
      dispatch(checkBox(id));
    };


return(
   <SeveralItemContainer>
   {
    todoData.map((item)=>{
      return (
      <TodoItemContainer key={item.id}>
      <TitleContainer>
      <img className ="dot" src={dot} alt="icon"></img>
      <div className="title">{item.title}</div>
      <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img>
      </TitleContainer>
      <div className="contentcontainer">
      <div className="content">{item.content}</div>
      </div>
      </TodoItemContainer>
      )
    })
   }
    </SeveralItemContainer>
)
};

export default TodoItem;