Rendered fewer hooks than expected. This may be caused by an accidental early return statement. 에러

React의 Hook 규칙을 무시해서 에러 발생

https://ko.reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper

Hook의 규칙 – React

 

오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출하지 마세요. 대신 아래와 같이 호출할 수 있습니다.

• ✅ React 함수 컴포넌트에서 Hook을 호출하세요.
• ✅ Custom Hook에서 Hook을 호출하세요. (다음 페이지에서 이 부분을 살펴볼 예정입니다)

 

문제 발생

  if (mode === MODE.UPDATE.Name && item.tasks) {
    let data = [];
    item.tasks.map((task) => {
      let newTask = { taskName: task.name, taskDescription: task.completed };
      data.push(newTask);
    });

    useEffect(() => {
      setTaskList(data);
    }, [mode]);

    
  }

 

해결

  // Read and Store task data if a task exits
  const readTask = () => {
    if (mode === MODE.UPDATE.Name && item.tasks) {
      let data = [];
      item.tasks.map((task) => {
        let newTask = { taskName: task.name, taskDescription: task.completed };
        data.push(newTask);
      });

      setTaskList(data);
    }
  };

  useEffect(() => {
    readTask();
  }, [mode]);