React - Hooks

useState

현재의 상태 값을 바꿔줍니다.
그리고 Hook는 function함수를 통합니다.

const React, {useState} from 'react';

export default function Counter () {

  const [numbers, setNumbers] = useState(0)
  // numbers는 현재의 상태값이고, setNumbers 는 바뀐 값을 가지고 있다.
  // useState는 시작값을 설정 하고있다.
  
 /* 
 	usetState의 원래 모습은
    const numberState = useState(0);
    
   	const numbers = numbersState[0];
    const setNumbers = numbersState[1];
    
    이 상태인데 비구조할당으로 인하여 변경하여 사용합니다.
    
 */
  
}

useRef

> DOM 에 대한 상태를 관리할떄 ( focus(), )
ex ) 로그아웃 버튼을 누르면 아이디 창에 커서가 focus 되게끔
	컴포넌트가 리렌더링 될때 그 값이 안 바뀌게끔 (setTimeout, setInterval, Scroll 위치)

• ref를 사용하기 좋은 케이스

• 포커스 제어, 텍스트 선택, 미디어 재생관리

• 명령형 애니메이션을 발동시킬떄

• 써드 파티 DOM 라이브러리를 통합할 때

  ! 선언적으로 할 수 있는 작업에서는 피해야함!

• ref 콜백은 라이프사이클 훅 전에 호출됨

  useEffect

  Props or State 변경있을때, SetTimtout, SetInterval, REST API 를 가져와서 Render 할떄 유용

useEffect(() => {
// props => state
// REST API
// setInterbal, setTimeout

return () => {
//clearInterval, clearTimeout
// 라이브러리 인스턴스 제거
// 값이 추가될때, 삭제되게 전의값 들이 모두 보여준다.
}
},[])
// [] 안에는 내가 사용하고 있는 state를 넣어주면 됩니다. 안넣게 된다면 모든 상태값들을 리랜더링 하게 될수도

### useMemo

> state 를 원할때 Rerender하고 불필요한 랜더를 막기 위해 기억하고 다음에 쓰기위함

```js

const { useMemo } = 'react';

const remember = useMemo(() => countfuntion(users),[users]);

// 감싸주는 형식
// 첫번째는 함수형태
// 두번째는 deps 
// [users] 값이 바뀔때에만 랜더링이 되고 그렇지 않을때에는 기존 값을 사용합니다.
// [users] 를 딥하게 사용할때에는 모든 것이 연관되어있으면 불필요하게 리랜더링 될 떄도 있습니다. 그럴때에는 deps 를 [] 비워주고, useState의 setState에 상태 값을 바뀔때 불러와지게 설정을 해줍니다. setValue ( val => val.concat(values));

export default React.memo(someThing);
// 최적화를 위한 작업 값이 완전히 바뀔떄 리랜더링 됨

// 더 딥하게 설정을 할 수도 있다.
export default Reac.memo(somthing, (prevProps, nextProps) => nextProps.user === prevProps.users);

// 현재 값과 다음 바뀐 값이 없다면 랜더링 되지 않게 한다. 하지만 상태들이 확실히 정적상태를 유지하는 가를 잘 체크 해봐야 한다.

useCallback

함수를 위한 Hook

• 감싸주는 형식
• 첫번쨰는 함수형 (useCallback (() => {블라블라})
• 두번쨰 deps 에는 사용하고 있는 상태를 참조

useReducer

상태 업데이트 로직을 컴포넌트 밖으로 분리 가능
reducer : 상태를 업데이트 하는 함수

const [number, dispatch] = useReducer(reducer, 0 ); // 첫번쨰에는 리듀서함수, 두번쨰는 시작값
// number 현재 상태, dispatch : action을 발생시키는 함수

// 먼저 리듀서 함수를 만들어 준다.
function reducer(state, action) {
	switch(action.type) {
      case 'Increase' : 
        return state + 1;
        
      case 'Decrease' : 
        return state - 1;
        
      default :
        throw new Error ('Undefined State')
 
    }

  const [ number, dispatch ] = useReducer(reducer, 0);
  
  const onCrease = () => {
  	dispatch({
    	type : 'Increase'
    })
  }
}

// dispatch를 통해 타입을 지정하여서 reducer 함수에서 state를 변경 시킨다.