[공식 문서 정리] Hook API 참고서

...기존 문서가 날아가 멘탈이 날아가있습니다. 리눅스 쓸때 입력이 밀리는지 뭐가 잘못인지 종종 다른 실행이 될때가잇는데 아... 카톡도 안되고 리눅스 싫네요.....ㅜㅜ

https://ko.reactjs.org/docs/hooks-reference.html#usestate

Hooks API Reference – React

1. useState

const [state, setState] = useState(initialState);

작동 시나리오 : 처음 렌더링 -> state에 initialState가 할당 / setState실행 -> 데이터 할당 -> rerendering

지연 초기 state

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

초기값 렌더링이 무시되어 고비용계산시 사용된다.

state갱신의 취소

만약 이전값과 값이 같다면 rendering을 하지 않는다.

2. useEffect

useEffect(didUpdate);

참고 :https://akjfal.tistory.com/13

불러오는 중입니다...

3. useContext

const value = useContext(MyContext);

redux와 비슷한 개념 및 사용법을 가지고 있다.

단 useContext(MyContext.Provider) 이와 같이 객체 그 자체가 아닌것을 사용해하면 안된다. MyContext로 사용해야한다.

4. useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

하나의 컴포넌트속에서 여러가지 useState를 사용시 dispatch를 통해 redux사용하듯이 사용이라고 생각하면 간단하다. useState를 정리해서 사용할 수 있다.

5. useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

메모이제이션된 콜백을 반환한다.

*메모이제이션 : 동일한 계산을 반복해야 할때 이전에 계산한 값을 메모리에 저장해 동일한계산의 반복수행을 제거하여 프로그램 실행속도를 빠르게하는 기술

*콜백 함수 : 다른 함수의 인자나 이벤트로써 호출되어지는 함수

이때 useEffect와 같이 의존성이 변경되었을때만 작동한다.

6. useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

메모이제이션된 값을 반환한다. useEffect와 같이 의존성이 변경되었을 때만 메모이제이션된값만 다시 계산한다. 단 useEffect와 달리 rendering 중에서 작동하므로 useEffect처럼 사용하면 안된다.

7. useRef

const refContainer = useRef(initialValue);

변경가능한 ref객체를 반환한다. 하지만 내용이 변경되어도 그것이 적용되지는 안는다. 즉 rerendering이 되지않는다(?)

8. useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

부모 컴포넌트로부터온 ref를 customize한다. 즉 값을 추가하거나 등등 의 일을 할 수 있다.

9. useLayoutEffect

useEffect와 동일하긴하나 차이점은 모든 DOM변경 즉 rendering된 후 무조건 발생한다.

10. useDebugValue

useDebugValue(value)

React개발자도구에서 표시해준다. 디버그용인듯하다.