[React] 리액트 hook 정리

hook hook 불면 기능이 넘치는 커다란 리액트 훅~

 

1. hook은 리액트에서 제공하는 내장 hook과 내가 직접 만든 custom hook으로 나뉜다

- 리액트에서 제공해주는 내장 hook : useState, useEffect, useParams,.... 등등

- custom hook : use___ 이렇게 작성! (여태 나는 반대로 알고 있었다 머쓱~)

 

2. hook 사용 시, 꼭 지켜야 할 규칙들

- 최상위에서만 hook 호출하자 (반복문, 조건문, 중첩된 함수 내에서 실행 금지!)

- React 함수 컴포넌트 내에서만 hook 호출하자

 

3. 내장 hook

- 기본 hook

1) useState

2) useEffect

=> 이 두 hook은 다른 글에서 자세히 다루었으므로 생략!

 

3) useContext

const value = useContext(MyContext);

- context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환

- context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정

- useContext의 인자 : context 객체 그 자체 여야함 (ex/ useContext(MyContext))

- context 값이 변경될 때마다 항상 리렌더링

- useContext를 Context.Provider와 같이 사용하자

// 예시
const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

 

- 추가 Hook

: 다른 훅은 뭐가 있나 살펴봤더니 useRef 말고 없었다... 그래서 하나하나 읽어보기로 결정!

 

1) useReducer

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

// 두번째 인자 : 초기 state 전달
// 세번째 인자 : 초기 state를 조금 지연해서 생성

- useState의 대체 함수

- 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호

- 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문

 

2) useCallback

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

-  useCallback은 콜백의 메모이제이션된 버전을 반환 (메모이제이션된 콜백을 반환)

--> 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

- 콜백의 의존성이 변경되었을 때에만 변경

- 불필요한 렌더링을 방지

 

3) useMemo

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

- 메모이제이션된 값을 반환

-  useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산

- 모든 렌더링 시의 고비용 계산을 방지

- useMemo로 전달된 함수는 렌더링 중에 실행됨으로 렌더링 중에 하지 않는 것을 이 함수 내에서 하면 안됨