React 버튼 누를 때마다 커스텀 훅이 실행 될 수 있도록은 못하나요???

Question

React 버튼 누를 때마다 커스텀 훅이 실행 될 수 있도록은 못하나요???음,, onClick에 함수 넣고 그 함수가 실행 될 때마다 커스텀 훅이 실행되도록 하고싶은데 아무래도 이건 hook사용법에 어긋나는거라 안되는 것 같은데 특정 이벤트마다 실행되게 할 순 없는건가요 커스텀 훅은??다른 방법이 혹시 있다면 알려주시면 너무 감사하겠습니다.

페코옹 · Accepted Answer

커스텀 hook은 조건에 따라 실행되는게 아니라 무조건 실행 되는 거에요.hook 안에 조건부로 실행 가능한 함수를 넣을 수 있는거죠.커스텀 hook 내 함수를 조건부로 실행하길 원하시면 아래 처럼 해보세요.커스텀 hook 사용해서const useHook = () => { const ref = useRef(); useEffect(() => { if (ref?.current) { ref.current.addEventListener("click", listen, false); } return () => { if (ref?.current) { ref.current.removeEventListener("click", listen, false); } }; }, [ref]); const listen = () => { console.log("HOOK 클릭"); }; return ref; }; export default function App() { const ref = useHook(); return (

); }hoc 사용해서const withLog = (Component) => { return (props) => { const handleClick = () => { console.log("HOC 클릭"); props.onClick(); }; return ; }; }; const Button = (props) => { return ; }; const ButtonWithLog = withLog(Button); export default function App() { return (

console.log("버튼 클릭")} />

); }

charlatan · Answer

그 특정 이벤트가 언제 실행될지 알지 못하므로 훅을 쓸 수 없죠. 함수 안에서 훅을 쓸 수 없는 것과 마찬가지...

zupserupse · Answer

불가능합니다

날리지베이스 · Answer

커스텀훅 안에서 무슨 작업을 하는데요?

메이플비 · Answer

커스텀 훅 자체는 랜더링 할 때 마다 콜이 되는것은 맞지만, 커스텀훅 구성을 어떻게 하냐에 따라 웬만한 것은 가능합니다.대충 큰 뼈대만 그려보자면,// custom hook file const useCustomHook = () => { const someCallBack = useCallback(() => { // things need to happen }); return someCallback; }; // component file const SomeComponent = () => { const someCallback = useCustomHook(); return ( ; ); };이정도 되겠네요만드려고 하시는것에 따라 저 방법 말고 다른 방법을 취해야 할 수는 있겠지만, 근본적인것만 염두해두시면 큰 어려움은 없으리라 봅니다. 그냥 커스텀 훅도 함수라고 생각하시면 함수를 어떻게 구성하고 호출하고 등을 기준으로 코드를 짜시면 거의 대부분의 문제들은 쉽게 해결이 될것입니다.

React 버튼 누를 때마다 커스텀 훅이 실행 될 수 있도록은 못하나요???

5개의 답변

Q&A 목록