hook

-자바스크립트 함수

useEffect(() => {
	// something...
}, [])

• 함수형 컴포넌트에서만 사용가능
• 최상위에서만 호출 가능 (반복,중첩문 불가)

useState()

-상태 관리를 위한 훅
-컴포넌트가 리턴하는 리액트 앨리먼트 =불변객체
-상태는 불변 값으로 관리하며, react dom이 상태 변화를 감지하도록, 규칙에 따라서 상태를 변화 시켜야 함

useEffect()

-사이드 이펙트 관리를 위한 훅
-인자 2개 (처음 그려질때/수정되어 그려질때 실행할 함수, 디펜던시 어레이 (의존성 배열))
-두번째 인자는 첫번째인자가 실행될 조건을 한정한다.
-return 부분을 clean up 이라고 한다.

useCallBack()

-함수를 메모제이션 하기위한 훅
(자식 컴포넌트에게 전달해주는 콜백 함수를 메모제이션 한다)

-사용

const my_NewFunction = usecallback(()=>{},[])

useRef()

-ref 객체를 다루기 위한 훅
-어떤 값을 넣어주면 그 값으로 초기화된 변경 가능한 ref 객체를 반환해준다.
-원본이 아니기 때문에 변경가능, 변경해도 리렌더링은 일어나지 않는다.

const Input = () => {

  const input_ref = React.useRef(null);

  const clicker = (input_ref) => {
    console.log(input_ref);
  }
  
  return (
    <>
      <input ref={input_ref}/>
      <button onClick={clicker}>button</button>
    </>
  );
}

custom Hook

-반복되는 로직을 재활용 하는 방법
-컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위한 것.
-생성 규칙 :
1. 함수명이 use로 시작해야 함
2. 최상위에서만 호출 가능
3. 리액트 함수 내에서만 호출
4. return 값을 꼭 줘야 함

상태 관리

상태 관리 툴

• ContextAPI()
• Redux
• Recoil
• zustand
• react-query
• mobx

리덕스

-state
-action
-ActionCreator
-reducer
-store
-dispatch