[코딩온] 웹개발자 풀스택 과정 14주차 회고 | React - hooks

hooks란?

• 클래스 컴포넌트에서만 가능했던 state(상태관리) 와 lifecycle(라이프사이클) 이 가능하도록 돕는 기능

let list = ['a','b','c','d','e'];
for ( let i = 0; i < list.length; i++) {
	console.log( list[i] );
}

hooks 사용규칙

• 최상위 단계에서만 호출 가능
  - 최상위 컴포넌트 X
  • 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안되는 것!
• hooks는 오로지 React 함수형 컴포넌트 안에서만 호출이 가능하다
• 커스텀 훅 이름은 "use"로 시작(권장사항)

hooks종류

• useState(): 상태 관리를 위한 가장 기본적인 훅
• useRef(): 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등)
• useEffect(): 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
• useMemo(): 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅
• useCallback(): 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
• useReducer(): 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅
• useContext(): 리액트에서 전역적으로 접근 가능한 데이터나 함수를 관리하고,
  불필요한 컴포넌트에서 그 값을 바로 가져와 사용할 수 있게 도와주는 훅

useMemo()

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 hook
• 렌더링 과정에서 특정 값이 바뀌엇을 때만 연산을 실행한다.

const memoizedValue = useMemo(callback,dependency)

• 렌더링 과정에서 두 번째 인자로 받은 의존 배열내 값이 바뀌는 경우에만 첫번째 인자로 받은 콜백함수를 실행해 구한 값을 반환한다.

useCallback

• 렌더링 최적화에 사용되는 hook API
• useMemo와 유사함. useMemo에서는 값을 최적화 시켰지만,
  다시 rendering 될 때 함수를 다시 불러오는 것을 막는다.

const memoizedCallback = useCallback(callback, dependency)

const onClikc = useCallback(e => {
	e.preventDefault();
    setNumber(number + 1);
}, [number]);

hook - useReducer()

• reducer란?
  현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수
  

Custom Hooks

• 컴포넌트에서 반복되는 로직이 많을 때 custom hooks을 이용하면 편리

• 즉, 컴포넌트 분할과 달리 컴포넌트 로직 자체를 분할하거나 재사용이 가능

• 보통은 hooks/ 디렉토리 안에 커스텀 훅을 정의하여 사용
  - use 로 시작하는 파일을 만드는 것이 관례

  • ex. useScroll.js, useToggle.js 등

참고

[코딩온] 웹개발자 풀스택 과정 14주차 ppt