토이프로젝트II를 통해 React에 TypeScript 사용해보기

기본적인 타입 지정은 기초적인 예시코드를 작성하면서 해보았지만 막상 프로젝트를 시작하면서 타입을 지정하려니 어렵게 느껴졌다.😥
민태강사님 말씀으론 타입스크립트는 2년간 꾸준히 사용해봐야 "나 이제 좀 타입스크립트 하는 것 같다." 라는 생각을 할 수 있다고 하셨다.... 지금부터 작은 규모의 프로젝트부터 꾸준히 사용해야겠다라는 생각을 했다.

토이프로젝트II props 타입 지정하기

Pages 디렉토리에 위치한 페이지컴포넌트 타입 지정

export interface PayData {
  baseSalary: number;
  weeklyHolidayAllowance: number;
  additionalAllowance: number;
  nationalPension: number;
  healthInsurance: number;
  longTermCare: number;
  employmentInsurance: number;
}

export interface SalaryCorrection {
  id: number;
  name: string;
  month: number;
  reasonForApplication: string;
  correctionDetails: string;
  onModal?: any;
  approval?: string;
  correctionState: string;
}
export interface EmployeeSalaryType {
  id: number;
  name: string;
  date: string;
  payData: PayData;
  isViewed: boolean;
  month: number;
}

const PayrollHistory: React.FC = () => {
  const [salaryCorrectionLists, setSalaryCorrectionLists] = useState<SalaryCorrection[]>([]);
  const [employeeSalary, setEmployeeSalary] = useState<EmployeeSalaryType[]>([]);
.
.
.

자식 컴포넌트 PayList props타입지정

interface PayListProps {
  id: number;
  name: string;
  payData: PayData;
  handleAdditionalPay: (inputValue: string | undefined, id: number, name: string, month: number) => void;
  isViewed: boolean;
  handleIsViewd: (id: number) => void;
  addSalaryCorrectionList: (reason: string, textareaValue: string | undefined) => void;
  month: number;
  isNull: boolean;
  spacificationModal: boolean;
  onSpacificationModal: () => void;
}

const PayList: React.FC<PayListProps> = ({
  id,
  name,
  payData,
  handleAdditionalPay,
  isViewed,
  handleIsViewd,
  addSalaryCorrectionList,
  month,
  isNull,
  spacificationModal,
  onSpacificationModal,
}) => {
.
.
.

자식 컴포넌트 SalaryList Props타입 지정

interface SalaryListProps {
  id: number;
  name: string;
  month: number;
  reasonForApplication: string;
  correctionDetails: string;
  onYnNModal: (id: number) => void;
  correctionState: string;
  deleteSalaryCorrection: (id: number) => void;
}

const SalaryList: React.FC<SalaryListProps> = ({
  id,
  name,
  month,
  reasonForApplication,
  correctionDetails,
  onYnNModal,
  correctionState,
  deleteSalaryCorrection,
}) => {
  const [contentDisplay, setContentDisplay] = useState(false);
  const { user } = useAuthContext();
.
.
.

급여명세서 Modal 컴포넌트 Props타입 지정

interface PayListProps {
  id: number;
  payData: PayData;
  onSpacificationModal: () => void;
  name: string;
  totalPay: number;
  handleAdditionalPay: (inputValue: string | undefined, id: number, name: string, month: number) => void;
  addSalaryCorrectionList: (reason: string, textareaValue: string | undefined) => void;
  month: number;
  isNull: boolean;
}

const SpacificationModal: React.FC<PayListProps> = ({
  id,
  payData,
  onSpacificationModal,
  name,
  totalPay,
  handleAdditionalPay,
  addSalaryCorrectionList,
  month,
  isNull,
}) => {
.
.
.

ApprovalModal 컴포넌트 Props타입 지정

interface ApprovalModalProps {
  handleApproval: (btnId: string) => void;
  btnId: string;
  onYnNModal: (btnId: string) => void;
}

const ApprovalModal: React.FC<ApprovalModalProps> = ({
  handleApproval, 
  btnId, 
  onYnNModal 
}) => {
.
.
.

빨간 타입 경고문구 줄이기 성공 😎

새로 경험한 타입 지정

'{ } | null' 형식은 'ReactNode' 형식에 할당할 수 없습니다.

let chkBtn = {};
if (correctionState === 'standBy') {
  if (user?.isAdmin === false) {
    chkBtn = (
      <>
        <div>대기중</div>
        <button onClick={() => deleteSalaryCorrection(id)}>
          close
        </button>
      </>
    );
  } 

위 로직처럼 빈 객체나 빈 배열을 선언해주고 이후에 조건에 따라 값을 넣어주는 방법을 많이 사용했었는데 타입 경고가 생겨서 아래처럼 변경해주었다.

  let chkBtn: React.ReactNode = null;
  if (correctionState === 'standBy') {
    if (user?.isAdmin === false) {
      chkBtn = (
        <>
          <div>대기중</div>
          <button onClick={() => deleteSalaryCorrection(id)}>
            close
          </button>
        </>
      );
    } 

ReactNode는 ReactElement, string, number, null, undefined, boolean 타입을 포함하며 빈 객체는 실제 렌더링할 수 있는 React 요소가 아니기 때문에 경고가 발생한다. ReactNode에 포함된 null로 선언해주니 경고가 사라진걸 확인 할 수 있었다.