리액트 - Custom Hook

Custom Hook

코드를 작성하다 보면 반복되는 로직을 재사용 해야하는 상황에서 custom hook 을 만들어서 관리 할 수 있다

input 값을 작성하는 경우에 여러 폼에서 그 로직이 반복될 수 있기 때문에 해당 커스텀 훅을 만들어서 사용

- 주로 input 값 작성, fetch 호출 시에 자주 사용된다

- 항상 use로 시작해야한다.

//custom hook
function useInputs(initialForm){//initialForm : form에서 사용할 초기값

  const [ form, setForm] = useState(initialForm);

  const onChange = useCallback(e =>{

    const {name, value} = e.target;

    setForm(form => ({...form, [name] : value}));

  }, [])

  const reset  = useCallback(()=>

   setForm(form => ({ ...form, [name]: value }));

  return [form, onChange, reset] //객체나 배열 둘다 return 이 가능

}

const initialState = {
  users:[
    {
      id: 1,
      username: 'hj',
      email: 'hj1@hj.com',
      active:true,
    },
    {
      id: 2,
      username: 'hj2',
      email: 'hj2@hj.com',
      active:false,
    },
    {
      id: 3,
      username: 'hj3',
      email: 'hj3@hj.com',
      active:false,

    }
  ]
}


function App() {

    const [form, onChange, reset] = useInputs({
        username:'',
        email:'',
      })

    const {username, email} = form

    const onCreate = useCallback(()=>{
        dispatch({
          type:'CREATE_USER',
          user:{
            id:nextId.current,
            username,
            email
          }
        })

        nextId.current+=1
        reset()
      }, [username, email, reset ]) //reset은 넣어주지 않아도 되지만 useCallback 에서 사용하고 있으므로 esLint 문법상 넣어야 한다
}

useReducer로 바꿔서 해보기 숙제

: 생각보다 혼자하려니 쉽지않다.. 지금은 강의만 듣고 혼자 지난 부분을 복습하는 정도로 진행해보고 있는데

혼자 더 많은 코드를 작성해봐야 될듯 싶다.

import { useState, useReducer, useCallback} from 'react';

function reducer(state, action){
  switch(action.type){
    case 'CHANGE':
      return {
            ...state,
            // inputs:{
            //   ...state.inputs,
              [action.name]: action.value
            // }
          };
          //숙제 오답  inputs 객체가 필요없기 때문에 해당 부분을 작성하지 않고 바로 대입해줘도 됨[action.name]: action.value
      case 'RESET':
        return Object.keys(state).reduce((acc, current) => {
          acc[current] = '';
          return acc;
        }, {});
        
        //숙제 오답 : 모든 state 	값을 빈값으로 만들어 주면되므로 반복문을 사용해서 존재하는 모든 key 값을 초기화
  }

}


//custom hook
function useInputs(initialForm){//form에서 사용할 초기값

  const [state , dispatch] = useReducer(reducer, initialForm)

  const onChange = useCallback(e =>{

    const {name, value} = e.target;

    dispatch({
      type:'CHANGE',
      name, 
      value
    })
  }, [])

  const reset  = useCallback(()=>

  dispatch({
    type:'RESET',
    // initialForm
    //오답 : initialForm은 필요없음 그 대신 deps에 [] 을 널어줘야함
  }), []
  )

  return [state, onChange, reset]

}

export default  useInputs;