리액트를 다루는 기술-8 (Hooks)

useState

• 컴포넌트 내의 상태를 유지하기 위해서 사용

---

useEffect

• 렌더링 될 때마다 수행해야하는 작업
• 마운트, 업데이트 이후에 해야할 일들을 자바스크립트 코드로 처리하기 위함
• DOM이 업데이트 되었음을 보장함
• componentDidMount, componentDidUpdate의 기능을 함
• 마운트, 업데이트 이후. 언마운트 전에 해야할 일들을 여기서 수행할 수 있음
  • 이벤트 리스너 등록, ref 접근, fetch
  • cleanup 할 것들을 리턴해주면 됨
• dependency를 매개변수로 줄 수 있음
  • 빈배열([])을 매개변수로 줄 경우 처음 컴포넌트가 실행되어 마운트 됐을 때에만 동작함
  • dependency가 변경되었는지 확인 후 변경되었을 때에만 실해됨

---

useReducer

• action에 따른 상태변경
• 기본 사용법

  const initialState = {count: 0};
  
  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return {count: state.count + 1};
      case 'decrement':
        return {count: state.count - 1};
      default:
        throw new Error();
    }
  }
  
  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        <button onClick={() => dispatch({type: 'increment'})}>+</button>
      </>
    );
  }
  

• function reducer(state, action){ action.type } function Component(){ const distpatch = useReducer(reducer, initState) }

---

useMemo

• 컴포넌트내 함수가 재생성, 실행되지 안도록 기억해 둠
• 컴포넌트가 재 실행 될때마다 함수가 게속 생기고, 렌더링 과정에서 계속해서 실행함
• dependency를 매개변수로 줄 수 있음
• dependency가 변경될 때마다 기억해둔 함수를 실행한 값을 반환함

---

useCallback

💡 useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)

• useMemo와 사용방법에 의해서 차이가 있지만 같은 역할을 한다.
• 함수를 반환함
• → 내가 쓰고 싶은 곳에서 실행해야 실행됨

export function useCallback<T>(
  callback: T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}

export function useMemo<T>(
  create: () => T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useMemo(create, deps);
}

 

https://basemenks.tistory.com/238

useCallback 과 useMemo 의 차이

 

💡 많이 사용한다고 좋은 것이 아님 메모리사용의 최적화를 위한 것이지만 남발할 경우 최적화에 오히려 방해가 될 수 있음

 

---

useRef

• DOM을 기억하여 접근가능하도록 함

function Component(){
	const input = useRef(null)
	
	const handleClickButton = () =>{
		input.current.focus()
	}
	

	return <div>
		<input type="text" ref={ref}/>
		<button onClick={handleClickButton}>input focus</button>
	</div>
}

---

커스텀 Hooks 만들기

• 이름이 use로 시작하는 자바스크립트 함수
• 여러 컴포넌트에서 이용할 수 있을 것 같은 기능으로 훅을 만듦
• 다른 컴포넌트에서 같은 커스텀 훅을 사용했더라도 state 와 effect는 컴포넌트마다 독립적이다

https://ko.reactjs.org/docs/hooks-custom.html

자신만의 Hook 만들기 – React