[React] React 심화(3)

❗❗  데브코스 72일차 (11.9)

72일차에는 71일차에 학습한 TS를 이용하여 TodoList를 만드는 실습을 진행한다.

TodoList의 모든 파일의 코드를 다루면서 소개하기 보다는 특정 일부분만 코드와

주석으로 간략하게 설명할 예정이다.

 

✅ useToggle.tsx

사용자 정의 hook으로 todoList에서 완료, 미완료를 처리하는 토글 버튼의 기능을 정의한다.

import { useCallback, useState } from 'react'
		//props의 타입 정의         return값 정의
const useToggle = (initialState: boolean): [boolean, typeof toggle] => {
  const [state, setState] = useState(initialState)
  const toggle = useCallback(() => setState((state) => !state), [])

  //리턴값은 상태를 나타내는 state : boolean
  // toggle 기능을 담당하는 toggle함수 : function
  return [state, toggle]
}

export default useToggle

✅ Toggle.tsx

위의 정의한 사용자 정의 useToogle hook을 사용하여 toggle를 담당하는 컴포넌트 생성

import React from 'react'
import { ChangeEvent } from 'react'
import useToggle from '../hooks/useToggle'

interface Props {
  // 옵셔널 체이닝 ? : props가 있어도 되고 없어도 된다.
  on?: boolean
  // onChange 함수의 매개변수가 ChangeEvent 타입의 props
  onChange?(e: ChangeEvent<HTMLInputElement>): void
}
				// props 정의 (...props는 on, onChage외의 props들을 의미)
const Toggle = ({ on = false, onChange, ...props }: Props) => {
  const [checked, toggle] = useToggle(on)
  				// 이벤트 타입 정의
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    toggle()
    onChange?.(e)
  }

  return (
    <>
      // props로 on, onChange 외의 props를 적용
      // style에 대한 props일 수도 있고, 다른 함수일 수도 있다.
      <div {...props}>
        <input
          type="checkbox"
          onChange={handleChange}
          checked={checked}
        />
      </div>
    </>
  )
}

export default Toggle

React + TypeScript를 이용하여 (간단한) 컴포넌트를 만들기 위해서는 크게 두 가지를 신경 쓰면 되는 것 같다.
1. 상위 컴포넌트에서 받아오는 Props들의 타입 정의
2. 컴포넌트 내에서 사용하는 함수나 상태들의 타입을 정의
이를 통해 상위에서 잘못된 Props를 내려준다든지, 컴포넌트에서 잘못된 타입을 정의할 경우
컴파일 단계에서 오류를 알려주므로 런타임 환경에서 문제가 되는 것을 방지할 수 있다.

만약 동일한 interface를 여러 곳에서 사용할 경우 이 또한 모듈로 분리해서 import 해서 사용할 수 있다.

 

👨‍💻 이전에는 props의 타입을 잘 모르겠거나 이벤트의 타입을 잘 모를 경우에 그냥 any로 때려 박아서 사용하는 습관이 있었다. 지금 생각해 보면 그럴 거면 왜 TS를 사용했나 싶었다. 이 블로그에서는 아주 짧고 간략하게 작성했지만, Type Guard와 여러 이벤트 타입 (클릭 이벤트, DOM 이벤트 등등)을 해당 타입에 맞게 찾고 정의하는 시야를 기를 수 있었던 것 같다.

📖 학습한 내용

• TypeScript를 이용하여 TodoList 만들기