[React] Hooks

Mira Jo·2021년 8월 26일
  • useEffect
    -, 두번째 파라메터 빈 배열 넣으면, 처음 렌더링 될 때만 실행되고 업데이트때 실행 안됨
    -, 특정 값이 변경될 대만 호출하고 싶을 때는, 두번째 파라메터에 검사하고 싶은 값 넣으면 됨
    -, (클래스형 comp 에서는 componentDidUpdate(prevProps, prevState) {
    if(prevProps.value !== this.props.value){
        doSomething();
        }
    }

Cleanup function(뒷정리 함수) : 컴포넌트 언마운트나 업데이트 직전 실행하고 싶을 때 반환

  • useReducer
    -, 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수.
    -, const [state, dispatch] = useReducer(reducer, {value: 0});
    -, 첫번째 파라미터에 리듀서 함수, 두번째는 리듀서 함수의 값
    -, 컴포넌트 업데이트 로직을 컴포넌트 밖으로 뺄 수 있는 장점

  • useMemo
    -, 렌더링 과정에서 특정 값이 바뀌었을 때만 연산 실행, 안 바뀌었으면 이전 결과 다시 사용

  • useCallback
    -, 첫번째 param: 생성하고 싶은 함수, 두번째 param: 배열(어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지)
    -, 빈 배열 ? 렌더링 될 때 한번만. 그 외 변수 ? 인풋 내용이 바뀌거나 새로운 항목 추가될 때
    -, 숫자, 문자열, 객체처럼 일반 값 재사용? useMemo, 함수 재사용? useCallback

0개의 댓글