리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고,

이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다.

이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데

한번 간단한 예시를 통해 만들어 보겠습니다.

| 예시

공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서

저도 use키워드를 붙여서 만들어 보겠습니다.

1. useInput

input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고

그 값을 input value로 보여주는 코드를 일반적으로 작성하려면

import { useState } from "react";

import { useInput } from "./hooks/useInput";

import "./App.css";

function App() {

const [nameInput, setNameInput] = useState("");

const [cityInput, setCityInput] = useState("");

const handleNameInput = (e) => {

setNameInput(e.target.value);

};

const handleCityInput = (e) => {

setCityInput(e.target.value);

};

return (

<>

<h1>hello~</h1>

<div>

</div>

<div>

</div>

<h3>

<div>name: {nameInput}</div>

<div>city: {cityInput}</div>

</h3>

</>

);

}

export default App;

이런 식으로 코드를 작성하면 각각 name과 city가 state로 잘 저장되고, 화면에 보여주게 됩니다.

근데 input의 개수가 늘어나면 그에 따라 useState와 함수를 계속 만들어 줘야 하는 단점이 있습니다.

이럴 때 커스텀 훅을 만들어서 사용하면 좋습니다.

먼저 useInput이라는 파일을 만들고 아래와 같이 코드를 작성하면 됩니다.

import { useState } from "react";

export const useInput = (initialValue) => {

const [value, setValue] = useState(initialValue);

const handleChange = (e) => {

setValue(e.target.value);

};

return {

value: value,

onChange: handleChange,

};

};

useInput을 value값과 hadleChange함수를 가지고 있는 객체를 리턴하도록 만들었습니다.

이제 아래 코드처럼 컴포넌트에서 import해온다음 사용하면 됩니다.

import { useInput } from "./hooks/useInput";

import "./App.css";

function App() {

const name = useInput("");

const city = useInput("");

return (

<>

<h1>hello~</h1>

<div>

</div>

<div>

</div>

<h3>

<div>name: {name.value}</div>

<div>city: {city.value}</div>

</h3>

</>

);

}

export default App;

2. useModal

useState로 상태를 통해 모달창을 보여주는 로직도 커스텀 훅을 통해 만들 수 있습니다.

먼저 useModal이라는 파일을 만들어 주고 아래 코드처럼 modal을 관리하는 로직을 작성해 주면 됩니다.

import { useState } from "react";

export const useModal = () => {

const [modal, setModal] = useState(false);

const handleModal = () => {

setModal(!modal);

};

return [modal, handleModal];

};

그리고 컴포넌트에서 import해와서 사용하면 됩니다.

import { useModal } from "./hooks/useModal";

import "./App.css";

function App() {

const [modal, handleModal] = useModal();

return (

<>

<h1>hello~</h1>

{modal ? <Modal handleModal={handleModal} /> : null}

</>

);

}

const Modal = ({ handleModal }) => {

return (

</div>

</div>

);

};

export default App;

이처럼 다양하게 방식으로 custom hooks를 활용할 수 있고,

잘 활용하면 깔끔하게 코드작성하는데 도움이 될 거 같습니다.

[React] 커스텀 훅 만들기(Custom Hooks)