custom hook

자신만에 hook을 만드는 것을 의미한다.
반복되는 로직을 처리할 수 있다.

예시 코드

• App.jsx

import { useState } from "react";

const App = () => {
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    return (
        <div>
            <input
                type="text"
                value={title}
                onChange={(e) => {
                    setTitle(e.target.value);
                }}
            />
            <input
                type="text"
                value={body}
                onChange={(e) => {
                    setBody(e.target.value);
                }}
            />
        </div>
    );
};

export default App;

• 리팩토링한 App.jsx

import useInput from "./hooks/useInput";

const App = () => {
    const [title, setTitleHandler] = useInput();
    const [body, setBodyHandler] = useInput();
    return (
        <div>
            <input type="text" value={title} onChange={setTitleHandler} />
            <input type="text" value={body} onChange={setBodyHandler} />
        </div>
    );
};

export default App;

• hook폴더 생성 후 useInput 생성

import { useState } from "react";

const useInput = () => {
    const [value, setValue] = useState("");

    const handler = (e) => {
        setValue(e.target.value);
    };

    return [value, handler];
};

export default useInput;

하루를 마치며

내일 드디어 숙련주차 개인과제가 시작된다. 공부했던 것을 활용해서 열심히 잘 해볼 것이다. 자신감을 가지고할 것 이다.