Hooks

Hooks : Class 기반의 단점을 보완

: 생명주기 메서드를 기반으로 쪼개는 것보다,

Hook을 통해 서로 비슷한 기능을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용한다.

 

사용규칙 
- 제일 최상위에서만 Hook 호출
- 리엑트 함수 컴포넌트 내에서만 Hook 호출

종류 

1. 기본 Hooks

1) useState : 상태 유지 값과 그 값을 갱신하는 함수를 반환

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

 

- setState 함수는 state를 갱신할 때 사용


2) useEffect 

: 업데이트 될 때 마다 실행 

useEffect(() => {
 
});

- 데이터 가져오기
- 구독 설정하기
- 수동으로 리엑트 컴포넌트의 DOM을 수정 

3) useContext

: 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유

 

 

2. 추가 Hooks

1) useReducer

: useState의 대체 함수

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

2) useCallback

: useCallback은 기본적으로 useMemo와 매우 유사

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

3) useMemo

: 성능 최적화를 위해 사용하지만, 보장이 있다고 생각하지는 말자!

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

4) useRef

: DOM 선택, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리

const refContainer = useRef(initialValue);

3. 이외

1) customHook

: 재사용될 함수들을 모아둔다.

쓰면서 반복된다고 생각될 때 뺀다.