2024-03-17T07:09:06.150Z

1

useContext가 제공하는 상태를 Count 컴포넌트가 사용하기 때문입니다.

const { count } = MyReact.useContext(countContext);

상태훅에서 다루긴했는데요. 상태가 바귀면 이를 사용한 컴포넌트도 다시 그려주는 것이 리액트 상태 훅의 역할이었습니다.

MyReact.useContext도 상태훅 기반으로 실습했는데요. 이 상태를 제공하는 커스텀 훅인 셈이에요. 이 상태가 바뀌면 이를 사용하는 측에서도 렌더링되는 겁니다.

2024-03-17T02:00:19.234Z

1

기존 실습 코드에서 두 번 렌더되는 현상을 해결한 코드입니다.

createContext의 인자를 컨택스트의 폴백(fallback) 값으로 사용합니다. 기존에는 이 값으로 에미터를 초기화 했습니다. 그리고 props.value로 에미터의 값을 바꾸는 방식이었습니다. 이것을 에미터의 상태를 바꾸고 구독 함수를 두 번 호출해 리렌더까지 영향주는 원인이었습니다.

  // 인자이름을 defaultValue로 바꾸었습니다.
  // 프로바이더 컴포넌트로 감싸지 않아 값을 주입하지 못할 경우 기본값으로 사용되기 때문입니다.
  function createContext(defaultValue) {
    // 에미터 생성을 늦춥니다.
    // 기존에는 defaultValue로 객체를 생성했습니다. (문제 원인)
    let emitter;

    function Provider({ value, children }) {
      // 에미터 객체를 props.value로 생성합니다.
      if (!emitter) {
        emitter = createEventEmitter(value);
      }

      React.useEffect(() => {
        emitter.set(value);
      }, [value]);

      return <>{children}</>;
    }

    // 컨택스트 값을 조회합니다.
    // 에미터에서 조회하고 프로바이더로 감싸지 않아 값을 제공받지 못하면 지정한 기본 값을 반환합니다.
    function getValue() {
      return emitter ? emitter.get() : defaultValue;
    }

    // 컨택스트 값 변화를 구독합니다.
    // 기존에는 emitter 객체를 노출했지만 undefined일 경우가 있어 방어 로직이 있는 함수를 정의했습니다.
    function on(handler) {
      if (emitter) {
        emitter.on(handler);
      }
    }

    // 컨택스트 값 변화를 구독 취소합니다.
    // 기존에는 emitter 객체를 노출했지만 undefined일 경우가 있어 방어 로직이 있는 함수를 정의했습니다.
    function off(handler) {
      if (emitter) {
        emitter.off(handler);
      }
    }

    return {
      Provider,
      getValue,
      on,
      off,
    };
  }

이를 사용한 useContext 훅도 변경했습니다. 폴백값이 아닌 프롭스를 통해 들어온 컨택스트 값을 이용해 상태를 만들었습니다. 컨택스트가 바뀌면 이 상태도 업데이트하여 훅을 사용하는 컴포넌트가 다시 그려지도록 의도한 코드입니다.

  function useContext(context) {
    // 컨택스트 값으로 상태를 정의합니다.
    const [value, setValue] = React.useState(context.getValue());

    React.useEffect(() => {
      // 컨택스트 값을 구독합니다.
      // 값이 바뀌면 value를 변경해 이 훅을 사용하는 컴포넌트를 다시 그립니다.
      context.on(setValue);

      return () => {
        // 컨택스트 구독을 취소합니다.
        context.off(setValue);
      };
    }, [context]);

    return value;
  }