개발간에 썼던 React use Hook - 2

1. useContext

컴포넌트 트리 전체에 데이터를 공유할 수 있도록 해주는 기능으로 Redux를 대체할 수 있습니다.

 

단계

1. createContext를 사용해 초기상태값을 넣어 새로운 컨텍스트 객체를 생성

2. ContextProvider 컴포넌트를 사용하여 하위 컴포넌트들 에게 context값 업데이트하고 전달

3. useContext를 사용하여 context값을 불러옴

 

💥 useContext 주의점

1. 컴포넌트 구조와 의존성 관리: useContext를 사용하여 컴포넌트에서 Context를 가져올 때, 컴포넌트의 구조와 의존성을 고려해야 합니다. Context를 너무 많이 사용하면 컴포넌트 간의 의존성이 복잡해질 수 있습니다. 필요한 경우에만 useContext를 사용하여 컴포넌트 간의 의존성을 최소화해야 합니다.
2. Context 변경 주기와 성능 최적화: Context 값이 변경될 때마다 컴포넌트가 다시 렌더링되기 때문에, 불필요한 렌더링을 방지하고 성능을 최적화해야 합니다. 필요한 경우에만 useContext를 사용하여 컴포넌트를 업데이트하도록 조치해야 합니다.
3. Context 의존성 배열 사용: useContext를 사용할 때 의존성 배열을 지정하여 컴포넌트가 필요한 경우에만 다시 렌더링되도록 할 수 있습니다. 의존성 배열을 사용하여 컴포넌트가 Context 값의 변경에 의존하는 경우에만 해당 컴포넌트가 업데이트되도록 설정할 수 있습니다.
4. 컨텍스트 타입과 타입 안정성: useContext를 사용할 때 올바른 컨텍스트 타입을 사용하고, 타입 안정성을 유지해야 합니다. TypeScript를 사용하는 경우에는 useContext를 사용할 때 제대로 된 타입을 지정하여 타입 안정성을 보장해야 합니다.
5. 가독성 유지: useContext를 사용하여 코드를 간결하고 가독성 있게 유지해야 합니다. 필요한 경우 커스텀 훅을 만들어서 로직을 추상화하고 재사용할 수 있도록 하면 좋습니다.

2. useReducer

useReducer는 React의 Hook 중 하나로, 상태를 관리하기 위한 기능입니다. 클래스형 컴포넌트에서 사용되는 useState와 유사한 역할을 하지만, 좀 더 복잡한 상태 로직을 다룰 때 유용합니다. 주로 컴포넌트에서 여러 상태를 하나로 묶거나, 상태를 업데이트하는 로직을 분리하고자 할 때 사용됩니다.

 

단계

리듀서 함수를 미리 정의하여 내부에서 보통 switch문을 사용하여 action 타입에 따른 행위들을 case별로 정의하게 된다.

사용할 컴포넌트에서 useReducer를 사용해 초기 상태값과 상태를 업데이트할 사전에 정의된 함수를 넣게된다.

이때 useReducer는 현재상태와 상태업데이트 함수 dispatch를 반환하게 된다.

 

💥 useReducer 주의점

1. 컴포넌트 분할: 상태와 상태를 업데이트하는 로직을 하나의 컴포넌트에서 모두 다루는 것이 아니라, 관련된 기능을 분리하여 여러 컴포넌트로 나누는 것이 좋습니다. 이렇게 하면 컴포넌트의 역할이 명확해지고, 유지보수가 쉬워집니다.
2. Reducer 함수 분리: reducer 함수는 상태를 업데이트하는 로직을 담당합니다. 복잡한 상태 로직을 처리할 때는 reducer 함수를 분리하여 여러 개의 작은 함수로 나누는 것이 좋습니다. 이렇게 하면 코드를 이해하기 쉽고, 테스트하기도 쉽습니다.
3. 불변성 유지: reducer 함수에서 상태를 업데이트할 때는 기존 상태를 변경하지 않고 새로운 상태를 반환해야 합니다. 이를 위해 불변성을 유지하는 방법을 사용해야 합니다. 예를 들어, 배열을 업데이트할 때는 배열 메서드의 변형 함수 대신 새로운 배열을 생성하는 방법을 사용해야 합니다.
4. 의존성 배열 사용: useReducer를 사용할 때 의존성 배열을 지정하여 필요한 경우에만 컴포넌트가 다시 렌더링되도록 설정할 수 있습니다. 의존성 배열을 지정하지 않으면 컴포넌트가 불필요하게 다시 렌더링될 수 있으므로 주의해야 합니다.

import React, { useReducer } from 'react';

// reducer 함수 정의
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // 초기 상태 정의
  const initialState = { count: 0 };
  
  // useReducer를 사용하여 상태와 dispatch 함수를 생성
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      {/* dispatch 함수를 사용하여 액션을 디스패치 */}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
};

export default Counter;