2022/11/22 - Hook

Hook 사용법

1. useInsertionEffect

useInsertionEffect같은 경우에는 css-in-js libarary에서 성능을 개선할수 있다.

2. useRef

useRef를 사용하는 경우

1. 문서 객체 접근/조작에사용
2. 렌더링없이 변경된 값을 기억할 때

const ref = useRef(null)

  //memory value
  //클래스 컴포넌트의 인스턴스 맴버처럼
  //함수 컴포넌트 내에서 특정 값을 기억하되
  //값을 변경해도 컴포넌트 렌더링을 영향을 주지않아야 할 경우에 사용한다

이전 props와 현재 props를 비교할 목적으로 useRef 훅을 사용할 수도 있다

withTheme과 useTheme 차이

withTheme 은 class에서 사용하고

useTheme은 function에서 사용할 수 있다

useMemo와 useCallBack 차이

const handleIncrement = useMemo(
    ()=>()=> setCount(()=>preCount + step),
    [step]
  )
//useMemo는 반환하는 값을 기억한다.
const handleIncrement = useCallBack(
  ()=> setCount(()=>preCount + step),
  [step]
)

useMemo, useCallBack 함수를 기억할 때는 결과는 같다. 단지, 모양은 useCallBack이 보기가 좋기 때문에 함수를 저장할 때는 useCallBack을 사용하고 useMemo는 값과 함수를 저장할 때사용하는 것이 좋다.

useMemo는 인증 정보 값을 기억할 목적을 위해서 사용한다

react.memo는 고차 컴포넌트, react.useMemo는 훅이다.

memo사용법

const myComponent = React.memo(function MyComonent(props){})
//props 가 바뀌지 않는 이상, 바꾸지 않는다.

function myComponent(props){

}

function areEqual(prevProps, nextProps){

}

export default React.memo(myComponent, areEqual)

메모 : useMemo와 memo차이 useCallback과 useMemo의 차이 공부할것

//const action = {type, payload[선택사항]}
const Action = {
  INC:"counter/increment",
}
export function counterReducer(state, action){
  if(action.type==="counter/increment"){
    return state+ action.payload
  }
  if(action.type==="counter/decrement"){
    return state- action.payload
  }else{
    return state
  }
}

useTransition 본인이 상태를 가지고 있을 때

useDeferredValue 자식의 입장에서 지연시킬 때 ⇒지연된 상태값이 없기 떄문에 지연된 상태값을 보여줄 수 없다.