Hooks

Hooks

---

1. Hooks?

Hooks는 리엑트 v16.8에 새로 도입된 기능으로 기존의 함수
컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다.

2. useState

함수 컴포넌트에서 상태 관리를 위한 훅입니다
하나의 상태 값만 관리할 수 있으므로 관리해야 할 상태가
여러개라면 useState를 여러번 사용하면 됩니다.

import {useState} from 'react'

const [value, setValue] = useState(0)

• value: 값
• setValue: 값의 상태를 변경하고 리렌더링됩니다.
• useState(): 괄호 안에 기본 값을 넣어줍니다.
  
  

3. useEffect

리엑트 컴포넌트가 렌더링될 때마다 작업을 생명 주기(Lifecycle)와
의존성 배열에 따라서 수행하도록 설정할 수 있는 훅입니다.

import {useEffect} from 'react'

const useEffect(( ) => { 
    //Mounting
    return(
    //unMounting
    )
}, [
    //Dependency array
])

4. useReducer

useState보다 더 다양한 컴포넌트 상황에 따라
값을 업데이트해 주고 싶을 때 사용하는 훅입니다.

import {useReducer} from 'react'

function reducer(state, action) {
    return {
        // 불변성을 유지해줘야 합니다
        ...state,
        [action.name]: action.value
    }
}

// state와 dispatch 함수를 받아옵니다.
const [state, dispatch] = useReducer(reducer, {value: 0});

// action에 type 필요없이 어떤 값도 들어올 수 있습니다.
const onChange = e => {
    dispatch(e.target)
}

• state: 현재 상태
• dispatch: 액션을 발생시키는 함수
• reducer: 리듀서 함수
• {value: 0}: 기본 값
  
  

5. useMemo

함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고,
원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용 합니다.

import {useMemo} from 'react'

const getDiaryAnalysis = useMemo(() => {
    console.log('useMemo 연산 시작함');
    const sum = x + y;
    return { sum };
  }, [x, y]);

• {}: callback Function
• []: Dependency array(의존성 배열)
  
  

6. useCallback

useMemo와 유사한 함수입니다.
주로 렌더링 성능을 최적화해야 하는 상황에서 사용합니다.
만들어 놨던 함수를 재사용할 수 있습니다.

import {useCallback} from 'react'

const getDiaryAnalysis = useCallback(() => {
    const nextList = list.concat(parseint(number));
    setList(nextList)
    setNumber('')
  }, [number, list]);

• {}: callback Function
• []: Dependency array(의존성 배열)
  
  

7. useRef

함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 줍니다.

import {useRef, useEffect} from 'react'

// 1. ref는 값을 저장하다가 리렌더링 되면 한꺼번에 보여준다.
const countRef = useRef(0)
const countHandler = () => countRef.current++

// 2. DOM요소를 선택할 수 있다.
const countRef2 = useRef("")
const useEffect(() => {
    countRef2.current.focus()
}, [])

return (
    <>
    <button onClick = {countHandler}> ref 증가</button>
    <input type = "text" ref = {countRef2}/>
    </>
)

8. 커스텀 Hook 만들기

비슷한 기능을 공유할 경우, 커스텀 Hook으로 작성하여
컴포넌트를 깔끔하게 분리해서 재사용할 수 있습니다.