-
Custom HookReact 2022. 12. 21. 16:27
Custom Hook
- 반복되는 로직이나 중복되는 코드를 우리만의 Hook, 즉 Custom Hook을 통해 별도로 관리할 수 있다.
// src/App.jsx import React from 'react'; import {useState} from 'react'; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(''); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(''); const onChangeBodyHandler = (e) => { setBody(e.target.value); }; return ( <div> <input type='text' name='title' value={title} onChange={onChangeTitleHandler} /> <input type='text' name='title' value={body} onChange={onChangeBodyHandler} /> </div> ); }; export default App;
많이 봐왔고 써왔던 코드이다.
이 코드의 경우 input 의 개수가 증가함에 따라 useState와 eventhandler도 계속 같이 증가하고 그로인해 코드에 중복이 생기고 있다.
이제 React에서 제공하는 useState나 useEffect와 같은 내장 Hook을 사용해서 나만의 Hook을 만들려고 한다.
useInput 을 만들어보겠다.
useInput이라는게 원래 있는 이름이 아니라, input을 관리하는 Hook이라 내가 이름을 그렇게 지은 것 이다.
Custom Hook의 이름은 아무래도 상관없다, 다만 파일 이름 앞에 use만 붙혀주면 된다.
그래야 다른사람들이 해당 코드를 봤을 때 "아 이 파일은 Hook 역할을 하는 파일이구나" 라고 바로 알 수 있다.
Custom Hook 만들기
1. src 폴더에 hooks 폴더 생성
2. hook 폴더에 useInput.js 파일 생성
위 코드에서 title쪽을 보면 title이라는 값을 하나 만들고 handler를 하나 만들고 있다.
그래서 value와 handler를 각각 1개씩 반환해주는 Hook을 짰다.
const useInput = () => { return [value, handler] } export default useInput
이런식으로.
// useInput.js import { useState } from 'react'; const useInput = () => { const [value, setValue] = useState(''); const handler = (e) => { setValue(e.target.value); }; return [value, handler]; }; export default useInput;
맨 상단 코드에서 title이란 값을 useState로 관리했으니 동일하게 써주고,
handler 함수도 onChangeTitleHandler 함수와 비교해보면 동일한것을 알 수 있다.
App.js 수정도 참 쉽다.
// src/App.jsx import React from 'react'; import {useState} from 'react'; import useInput from './hooks/useInput'; const App = () => { // // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. // const [title, setTitle] = useState(''); // const onChangeTitleHandler = (e) => { // setTitle(e.target.value); // }; const [title, onChangeTitleHandler] = useInput(); // // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. // const [body, setBody] = useState(''); // const onChangeBodyHandler = (e) => { // setBody(e.target.value); // }; const [body, onChangeBodyHandler] = useInput(); return ( <div> <input type='text' name='title' value={title} onChange={onChangeTitleHandler} /> <input type='text' name='title' value={body} onChange={onChangeBodyHandler} /> </div> ); };
저 4줄짜리 코드가 1줄로 축약되는 것을 볼 수 있다.
Custom Hook은 이렇게 사용한다.
'React' 카테고리의 다른 글
성능 최적화를 위한 React-hook (0) 2022.12.21 Redux 이용해서 TodoApp 만들기 (0) 2022.12.20 Redux 미들웨어(Thunk) (0) 2022.12.20 styled component porps해서 쓰기 (0) 2022.12.20 Redux(3) - react-router-dom, props children, Dynamic Route (0) 2022.12.20