Custom Hooks

230109

 

Custom Hooks

 

✔︎ 반복되는 로직을 쉽게 재사용하기 위함

✔︎ 컴포넌트의 로직 분리로 코드 정리 가능

 

-보통은 큰 디렉토리 안에 작은 디렉토리에 useHooksName.js 파일을 만들어 진행한다

-기존에 존재하는 Hooks를 사용하여 원하는 기능을 구현해준다

-컴포넌트에서 사용하고 싶은 값을 반환(return)한다

 

onChange : useState, useCallback ➡️ useReducer

 

import React, { useReducer, userCallback } from react;

 

function reducer(state, action) {

switch(action.type) {

case ‘CHANGE_INPUT’:

return {

…state,

[action.name]: action.value
};

case ‘RESET’

return Object.keys(state).reduce((acc, current) => {

acc[current] = ‘’;

return acc;

}, {});

default:

return state;

}

}

 

function useInputs(initialState) {

const [state, dispatch] = useReducer(reducer, initialState);

 

const onChagne = useCallback(e => {

const { name, value} = e.target;

dispatch({

type: ‘CHANGE_INPUT’,

name,

value

});

}, []);

 

const reset = useCallback(() => {

dispatch({ type: ‘RESET’ }), []);

 

return [state, onChange, reset]

}

 

export default useInputs;

 

원하는 로직(틀)을 짜고 커스텀 훅을 사용하고자 하는 컴포넌트에서 사용하기만 하면 된다(일반적인 hooks 처럼 import, syntax…)