custom hook으로 유지 보수 관리하기

custom hook

커스텀 훅을 쓰는 이유는 뭘까?
비슷하게 생긴 반복되는 구조의 코드를 획기적으로 줄이고, 직관적이고 간편하게 관리할 수 있을 뿐 아니라, 유지 보수 측면에서도 효율성이 높기 때문이다.

그럼 어떻게 사용하면 되는지 코드를 통해 살펴보자 !

// App.jsx
import “./App.css”;
import {useState} from “react”;


function App(){
const [name, setName]= useState(‘’);
const[password, setPassword] = useState(‘’);


const onChangeNameHandler = (e){
setId(e.target.value)};

const onChangePasswordHandler = (e){
setId(e.target.value)
};

return(  
<div>
<input type = ‘text’ value = {name} onChange = {onChangeNameHandler}/>
<input type = ‘password’ value = {password} onChange = {onChangePasswordHandler}/>
</div>
)
};

위 코드는 아주 깔끔하고 군더더기 없어 보이지만 ! 항상 if ~~? 라는 가정을 하면 이야기가 달라진다.
만약 name, password 이외에 추가로 값의 변화를 체크해야 하는게 100개 이상 생긴다면
매번 useState 선언하고 handler 함수 작성하면 코드가 어마어마하게 늘겠지 !
그런 불필요한 반복을 줄이기 위해서 커스텀 훅을 쓰는거다!

우선 src 폴더 밑에 hooks라는 폴더 만들고, 그 안에 useinput.js 라는 파일을 생성한다.
그 후 코드를 작성해보자.

import {useState} from “react”;

const useInput = () => {
// state
const [value, setValue] = useState(‘’);

// handler
const handler = (e) => {
setValue(e.target.value)
}
return [value, handler];
}

export default useInput;```

`value` 값을 초기값으로 담고, `setValue` 자체를 그다음에 담는게 아니라, `setValue` 자체를 관리해주는 핸들러 함수를 담아 내보내고, 그걸 기존 `App.jsx` 파일의 `useState`한테 적용시킨다는거다!!
적용해보자.

```javascript
// App.jsx

import “./App.css”;
// import {useState} form “react”; (주석 처리)

// export 했던 커스텀 훅 import 해오기

import useInput from “./hooks/useInput”;

function App(){

// useInput 안에 변수 담기
const [name, onChangeNameHandler] = useInput(‘’);
const [password, onChangePasswordHandler] = useInput(‘’);
}
return(  
<div>
<input type = ‘text’ value = {name} onChange = {onChangeNameHandler}/>
<input type = ‘password’ value = {password} onChange = {onChangePasswordHandler}/>
</div>
)
};

// 기존의 useState를 import 해온 useInput 커스텀 훅으로 교체해줌. 
// 이렇게 하면 useState, onChange 함수  각 1개씩 총 2개를 만들지 않고, 1개의 변수 선언으로 관리가 가능해짐 !

이렇게 하면 코드가 아주 깔끔해지는걸 볼 수 있다. 오늘 배운 커스텀 훅은 새롭게 시작되는 프로젝트 할 때 다시 적용해봐야겠다.