[REACT] Hooks 정리 파일

1. useState()
- const [state, setState] = useState(초기값)
- 값이 변경되면 재렌더링

2. useRef()
const state = useRef(초기값)
state => 객체
state.current => 값 저장
- 값이 변경되면 렌더링 x

3. useEffect()
- useEffect(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useEffect(()=>{ 하고 싶은 일 })  : 렌더링 될 때마다 콜백함수 실행
- useEffect(()=>{ 하고 싶은 일 }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useEffect(()=>{ 하고 싶은 일 }, [value]) : value 값이 변경되었을 때 콜백함수 실행

4. useMemo()
- 메모리에 "값" 저장
- useMemo(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }) : 렌더링 될 때마다 콜백함수 실행
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }, [value]) : value 값이 변경되었을 때 콜백함수 실행

5. useCallback()
- 메모리에 "함수" 저장
- useCallback(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }) : 렌더링 될 때마다 콜백함수 실행
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }, [value]) : value 값이 변경되었을 때 콜백함수 실행

6. useReducer()
- 상태 변경 로직을 컴포넌트에서 분리 가능 -> 재사용 가능
- const [state, dispatch] = useReducer(reducer함수, 초기값)

- 동작 과정
1.  dispatch({ key1 : value1, key2 : value2}) : state 값을 변경시켜주는 함수
2. reducer함수가 실행
   function reducer(state, action){
       // if, switch문을 이용해서 action 분석
       switch(조건) {     // action.key1
            case value1 : // 하고 싶은 일(state 값을 새로운 값으로 변경)
            case value2 : 
            default : 
      }
   }