이 호출과 일치하는 오버뢰드가 없습니다. 0개의 인수가 필요한데 1개를 가져왔습니다. 오류가 뜨네요

위와같이 빨간색 줄이 발생하고있습니다.

화면은 정상출력되구요.

설정문제일까요?

에러 상세

이 호출과 일치하는 오버로드가 없습니다.
오버로드 1/5('(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]')에서 다음 오류가 발생했습니다.
'(state: Todo[], action: Action) => ({ in: number; content: string; } | Todo)[]' 형식의 인수는 'ReducerWithoutAction<any>' 형식의 매개 변수에 할당될 수 없습니다.
대상 서명이 너무 적은 인수를 제공합니다. 2 이상이 필요하지만 1을(를) 받았습니다.
오버로드 2/5('(reducer: (state: Todo[], action: Action) => ({ in: number; content: string; } | Todo)[], initialState: never, initializer?: undefined): [never, Dispatch<Action>]')에서 다음 오류가 발생했습니다.
'never[]' 형식의 인수는 'never' 형식의 매개 변수에 할당될 수 없습니다.ts(2769)

0개의 인수가 필요한데 1개를 가져왔습니다.ts(2554)

(property) data: {
id: number;
content: string;
}

<소스>

import { useEffect, useReducer, useRef, useState } from "react";
import "./App.css";
import Editor from "./components/Editopr";
import { Todo } from "./types";
import Todoitem from "./components/TodoItem";

type Action =
  | {
      type: "CREATE";
      data: { in: number; content: string };
    }
  | { type: "DELETE"; id: number };

function reducer(state: Todo[], action: Action) {
  switch (action.type) {
    case "CREATE":
      return [...state, action.data];
    case "DELETE":
      return state.filter((todo) => todo.id !== action.id);
  }
}

function App() {
  const [todos, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  const onClickAdd = (text: string) => {
    dispatch({ type: "CREATE", data: { id: idRef.current++, content: text } });
  };

  const onClickDelete = (id: number) => {
    dispatch({ type: "DELETE", id: id });
  };

  useEffect(() => {
    console.log(todos);
  }, [todos]);

  return (
    <>
      <h1>Todo</h1>
      <Editor onClickAdd={onClickAdd}>
        <div>child</div>
      </Editor>
      <div>
        {todos.map((todo) => (
          <Todoitem key={todo.id} {...todo} onClickDelete={onClickDelete} />
        ))}
      </div>
    </>
  );
}

export default App;

답변 2

1

이정환 Winterlood

2024-12-19T01:15:30.283Z

안녕하세요 이정환입니다.

우선 코드에 오타가 있네요 Action 타입을 정의하는 부분에서 id를 in으로 잘못 작성하신것 같습니다.

해당 오타로 인해 타입 추론이 정상적으로 이루어지지 않은걸로 보여요!

오타 수정하시면 문제 없이 동작할 것 같습니다. 그래도 안되면 답글 주세요

1

Park Ju Yeong

2024-12-19T01:19:20.855Z

와. 답변 정말 빨리 달아주시네요!

수정 후 에러 사라지는 것 확인하였습니다.

타입스크립트의 타입이 어떻게 연결되는지 에러로 더

잘 알수있었습니다.

 

0

이정환 Winterlood

2024-12-19T01:20:15.812Z

앗 ㅋㅋㅋ 다행이네요! 감사합니다 😃

 

1

인프런 AI 인턴

2024-12-19T01:01:26.325Z

안녕하세요, 인프런 AI 인턴입니다.

Park YongCheon님이 제기하신 오류 메시지는 useReducer 함수의 사용과 관련된 문제로 보입니다. useReducer는 두 개의 필수 매개변수를 필요로 합니다: 리듀서 함수와 초기 상태입니다. 그런데, 오류 메시지를 보면 호출 시에 인수의 타입이나 개수가 일치하지 않아서 문제가 발생한 것으로 보입니다.

문제의 원인

코드를 살펴보면 Action 타입 정의에서 data property에 있는 ‘id’의 타입이 맞지 않는 부분이 발견됩니다. 이는 타입스크립트에서 타입 불일치로 해석하여 오류를 발생시키고 있습니다. CREATE 액션의 data에 있는 ‘id’의 잘못된 표현으로 인해 reducer 함수 내에서의 동작이 올바르게 작동하지 않을 수 있습니다.

해결 방법

1. Action 타입 정의에서 CREATE 액션의 data 타입을 아래와 같이 수정해야 합니다:

   type Action =
    | {
        type: "CREATE";
        data: { id: number; content: string };  // 'in' 대신 'id'로 수정
      }
    | { type: "DELETE"; id: number };
   

2. 이 수정 이후, useReducer에서 초기 상태를 올바르게 전달하는지 확인해야 합니다:

   const [todos, dispatch] = useReducer(reducer, []);
   

추가 참고사항

만약 위의 수정으로도 문제가 해결되지 않으면, useReducer의 초기 상태 및 Action의 타입이 다른 부분에서 에러를 유발할 수 있습니다. 따라서, 전체적인 상태 관리를 다시 한번 확인해 보시는 것을 추천드립니다.

유사한 해결 방법 링크

비슷한 문제를 겪으신 분의 질문과 답변을 열람하실 수 있는 링크를 제공드립니다:

• 리액트 useReducer 사용 시 타입 오류 해결 방법
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

Park Ju Yeong

2024-12-19T01:04:42.404Z

아 , 오타 하나가 타입을 못 찾게 만들었군요.

타입스크립트를 사용하는 이유를 알게되네요.

답변 감사합니다.