[React] Hook (useCallback/useMemo/useContext/useReducer)

민수·2023년 3월 7일
0
post-thumbnail

useCallback

import { useCallback } from 'react'

const memoizedCallback = useCallback(() => {
	// 상태가 변경이 되었을 때 반환할 callback 함수
  	doSomething(state, state2)
}, [state, state2])
  • 상태가 변화되면 callback 함수를 반환한다.
  • 상태가 변화되지 않으면 캐시된 함수를 반환한다.
  • 최초 렌더링시 callback 함수를 반환한다.
  • 반환되는 함수는 호출된 것이 아니다. (사용자가 반환된 함수를 호출해 사용 가능)

주의할 점

const memoizedCallback = useCallback(() => {
	// 상태가 변경이 되었을 때 반환할 callback 함수
  	doSomething()
}, [])
  • 상태를 확인할 값이 빈 배열이면 최초 렌더가 될 때만 실행이 된다.
  • 이 경우 componentDidMount와 비슷하게 작동한다.

useMemo

import { useMemo } from 'react'

const memoizedValue = useMemo(() => doSomething(state1, state2), [state1, state2])
  • 상태가 변화되면 callback 함수 값을 반환한다.
  • 상태가 변화되지 않으면 캐시된 값을 반환한다.
  • 최초 렌더링시 callback 함수 값을 반환한다.

useCallback & useMemo

  • useCallback은 callback 함수를 반환하고 useMemo는 callback 함수 값을 반환한다.

memo

import { memo } from 'react'

const Component = memo((props) => {
	return <>{props.something}</>
})
  • props가 변화되면 컴포넌트를 새로 렌더링한다.
  • props가 변화되지 않으면 마지막으로 렌더링된 결과를 재사용한다.
  • 상태나 context가 변할 때는 다시 렌더링 된다.
  • 이 메서드는 성능 최적화를 위해서만 사용해야 하고 렌더링을 방지하기 위해 사용해서는 안된다.

useContext

import { createContext, useContext, useState } from 'react'

const Global = createContext()

const Welcome = () => {
  const obj = useContext(Global)
	return (
    	<div>
        	Welecome {obj.nickname}
        </div>
    )
}

export const MyApp = () => {
  const [nickname, setNickname] = useState('cloudcoke')
  const Users = {
  	nickname
  }
	return (
    	<Global.Provider value={Users}>
        	<Welcome />
        </Global.Provider>
    )
}
  • creatContext로 context를 생성해야 한다.
  • 인자로 생성한 context를 받는다.
  • context의 value를 반환한다.
  • 전역 상태를 관리하기 위해 사용한다.
  • Redux와 기능이 비슷하다고 볼 수 있다.

useReducer

import { useReducer } from 'react'

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1}
    case 'decrement':
      return {count: state.count - 1}
    default:
      throw new Error()
  }
}

const Counter = () => {
  const initialState = {count: 0}
  const [state, dispatch] = useReducer(reducer, initialState)
  
  const increment = () => {
  	dispatch({type: 'increment'})
  }
  const decrement = () => {
  	dispatch({type: 'decrement'})
  }
  
  return (
  	<>
      Count : {state.count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  )
}
  • useState의 대체 함수이다.
// useState
const [state1, setState1] = useState(init1)
const [state2, setState2] = useState(init2)
const [state3, setState3] = useState(init3)
...
// useReducer
const initialState = {
	init1,
  	init2,
  	init3,
  	...
}
const [state, dispatch] = useReducer(reducer, initialState)
  • 복잡한 상태 관리 로직을 구현하기 위해 사용한다.
const initialState = {count: 0}
const [state, dispatch] = useReducer(reducer, initialState)
  • useReducer는 setState와 비슷하게 state와 함수를 반환한다.
const reducer = (state, action) => {
  ...
}
  • reducer 함수는 매개 변수로 state와 action을 받는다.
  • action은 dispatch 함수의 인자 값이다.
  • dispatch 함수를 호출하면 reducer 함수가 실행된다.
  • reducer 함수에 로직을 구현해 state를 조작한다.

  • dispatch 함수는 reducer에게 action을 전달하고 reducer는 action 값을 이용해 state를 변경 시킨다.

참고

React 공식 문서 - Hooks API Reference
React Docs BETA
React 공식 문서 - React.memo

0개의 댓글