React 커스텀 훅 관련 질문이 있습니다!

Question

아래 코드는 간단한 리액트 투두리스트 코드입니다. 커스텀훅이 이상하게 호출되는 문제가 있어서 아무리 생각해도 모르겠어서 질문드립니다 ㅠ App.js 입니다.import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { addTodo, completeTodo, getAPI } from '../slice'; import { useInput, useLiteFunction } from '../hooks'; const clickFactory = (dispatch, setTodo, todo) => () => { dispatch(addTodo(todo)); setTodo("") } export default function App() { const [todo, setTodo] = useInput(); const dispatch = useDispatch(); const todos = useSelector(({ todoReducer }) => todoReducer.todos); const [done] = useState(() => (todo) => dispatch(completeTodo(todo))) const [callAPI] = useState(() => () => dispatch(getAPI())); const [click] = useLiteFunction(clickFactory, dispatch, setTodo, todo); return ( <>

{todos.map((todo, index) =>

{todo.title}

)}

); } 이건 커스텀 훅입니다. hooks.jsimport React, { useState } from 'react'; export const useInput = () => { const [input, setInput] = useState(""); const handle = (e) => { e.target ? setInput(e.target.value) : setInput(e); } return [input, handle]; } export const useLiteFunction = (func, ...args) => { const [targetFunction, setFunction] = useState(null); if (!targetFunction) { setFunction(() => func(...args)); } return [targetFunction]; } App.js 에서 "입력" 버튼을 눌러서 click을 호출하게 되면 커스텀 훅 useLiteFunction이 호출되어 잘 작동할 것이라 기대했습니다. 하지만 "입력" 버튼을 누르면 커스텀 훅 useInput이 호출되어 todo를 ""로 만들어버리는 문제가 있습니다. 저는 따로 useInput을 호출한 적이 없는데 왜 갑자기 useInput이 호출돼서 todo를 지워버리는 것일까요?? 똥같은 코드 봐주셔서 감사합니다!

IT공부중 · Answer

setTodo('')에서 todo를 '' 로 만들어주고 있는거 아닌가요?

React 커스텀 훅 관련 질문이 있습니다!

1개의 답변

Q&A 목록