TS_개인 과제

오늘 했던 것

• typescript로 개인 과제 진행
  • level 1: ts + react로 투두리스트 작성

오늘의 문제

• 나열하기에는 많은 문제들

과제를 진행하기 전

• 그냥 :타입 요렇게 잘 지정만 해주면 되겠지 뭐~
  하고 가볍게 시작했는데
  투두리스트에서 2시간을 소비했다.
  (rtk, router 등 적용 안된 가장 기본적인 투두리스트)

기억에 남는 문제 요약

1. eventHandler에서 event는 어떻게 가져와야 되는데..

• 가장 처음 UI를 만들고 사용자의 input을 받는
  onChange이벤트에 작동하는 함수를 생성했다.
  이 함수는 event가 발생하는 요소의 값을 객체에 업데이트 해주는 것인데
  JS와 TS의 차이는 아래와 같다.

일반 JS 코드

const handleChange = (e) => {
    const { name, value } = e.target;
    name === "제목" && setInput((prev) => ({ ...prev, title: value }));
    name === "내용" && setInput((prev) => ({ ...prev, text: value }));
  };

TS

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target;
    name === "제목" && setInput((prev) => ({ ...prev, title: value }));
    name === "내용" && setInput((prev) => ({ ...prev, text: value }));
  };

대체 event 타입으로 지정해야 하는
React.ChangeEvent<HTMLInputElement> 는 어디서 나온건데..
하고 찾아보니 이벤트타입<이벤트가 발생하는 요소>으로 이해하면 된다고 한다..
이벤트는 MouseEvent, changeEvent, FormEvent등이 있어서
찾으려면 유추해서 찾을 수는 있겠지만
익숙하지 않아 안 쓰면 금방 잊어버릴 거 같다,

2. useState의 타입 지정

• 뭐 하나 가만 놔두지를 않는 TS
  ' 다 너 잘 되라고 하는 거야~ ' 라는 말이 떠오른다.
  나중을 생각하면 고마울 수도 있겠지만 현재는 상당히 괴롭다.

• 1번에 설명한 함수는 userInput이라는 state에 업데이트 되기 때문에
  useState를 사용해야 했다.
  코드는 아래와 같다

// state에 사용 될 type 선언
interface UserInput {
  id: string,
  title: string,
  text: string,
  isActive: boolean,
}

// useState에 제네릭으로 UserInput타입을 넘겨준다.
const [input, setInput] = useState<UserInput>({
    id: nanoid(),
    title: "",
    text: "",
    isActive: true,
  });

• 가장 흔하게 쓰던 useState 마저도 어려워졌음을 느꼈다.

느낀점

• TS는 프로젝트가 커지고 코드가 많아질수록 유리해지고
  또 잘 쓰면 고급 프로그래밍을 할 수 있다고 하는데
  지금은 가장 기본적인 것도 어려워서 자신감이 조금 떨어진다.
  다양한 사람들의 코드를 보며 쓰임새(?)를 많이 봐야겠다.
  그리고 유틸 타입과 제네릭에 대해 공부가 많이 필요할 거 같다.