Hook

HOOK

클래스 컴포넌트 -> 함수형 컴포넌트(함수형 프로그래밍)

1. useState (== setState)

   • 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.

   const [state, setState] = useState(initialState)
   
   setState(newState)

2. useEffect (== componentDidMount / componentDidUpdate )

   useEffect(didUpdate)
   
   useEffect(() => {
       const subscription = props.source.subscribe()
       return () => {
           // Clean up the subscription
           subscription.unsubscribe()
       }
   })
   
   // 조건부  useEffect의 두번째 인자에 들어오온 인자(props.source)가 변경될때만 작동
   useEffect(() => {
       const subscription = props.source.subscribe()
       return () => {
           subscription.unsubscribe()
       }
   }, [props.source])

3. useContext

   const value = useContext(MyContext)

4. useReducer (== Redex.reducer())

   const [state, dispatch] = useReducer(reducer, initialArg, init)
   
   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>
           </>
       )
   }

5. useCallback ( == shouldComponentUpdate)

   const memoizedCallback = useCallback(() => {
       doSomething(a, b)
   }, [a, b])

6. useMemo ( == useCallback)

   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

7. useRef (React.createRef())

   • useRef는 .current 프로퍼티로 ref에 접근가능!(.focus()로 많이 사용)

     const refContainer = useRef(initialValue)
     
     function TextInputWithFocusButton() {
         const inputEl = useRef(null)
         const onButtonClick = () => {
             // `current` points to the mounted text input element
             inputEl.current.focus()
         }
         return (
             <>
                 <input ref={inputEl} type="text" />
                 <button onClick={onButtonClick}>Focus the input</button>
             </>
         )
     }