# 65 Context Api 타입지정

 

 

베이스 셋업 

---

 

import { createContext } from "react";

type Timer = {
  name: string;
  duration: number;
};

type TimersState = {
  isRunning: boolean;
  timers: Timer[];
};

type TimersContextValue = TimersState & {
  addTimer: (timerData: Timer) => void;
  startTimers: () => void;
  stopTimers: () => void;
};

const TimersContext = createContext<TimersContextValue | null>(null);

 

 

초기에는 null값이 들어감 그래서 (null)

 

 

 

Header컴포넌트에서 TimersContext에 접근 

 접근할 때는 value에 정의된 대로

상황에 맞게 값을 설정해야 하므로

null이 되면 안되는 상황 체크 

 

 

 

방법 1.  타입스크립트에게 알려줌 !느낌표로

---

 

import { useContext } from "react";
import { TimersContext } from "../store/timers-context.tsx";
import Button from "./UI/Button.tsx";

export default function Header() {
  const timersCtx = useContext(TimersContext)!;
  return (
    <header>
      <h1>ReactTimer</h1>

      <Button>Stop Timers</Button>
    </header>
  );
}

 

 

 

방법 2. null체크하는 부분 커스텀훅으로 만들기 

---

 

export const useTimersContext = () => {
  const timersCtx = useContext(TimersContext);

  if (timersCtx === null) {
    throw new Error("TimersContext is null - that should not be the case");
  }

  return timersCtx;
};

 

이렇게 되면 

 

Header에서 사용하는 timersCtx가 null이 될 수없다는 것을 타입스크립트에게 알리게 됨 

그래서 Header에서 확인작업을 거치지 않아도 됨.

 

 

 

import { useTimersContext } from "../store/timers-context.tsx";
import Button from "./UI/Button.tsx";

export default function Header() {
  const timersCtx = useTimersContext();

  return (
    <header>
      <h1>ReactTimer</h1>

      <Button>{timersCtx.isRunning ? "stop" : "Start"} Timers</Button>
    </header>
  );
}