20231219 TIL Typescript React Query TodoList (3)

목표

• 과제 정리

새로 알게 된것/ 오늘의 코드

typescript를 이용하며 해맸던 것

1. map은 어떻게 사용해야할까// 콜백함수의 인자도 타입이 필요하다!

        {data
          .filter((item: TodoItem) => item.isDone === !isActive)
          .map((item: TodoItem) => {
            return <Todo key={item.id} todo={item} isActive={isActive} />;
          })}

 나같은 경우 model폴더에서 type을 지정해 둔것이 있어서 사용하면 된다. 

 

map의 인자인 item은 결국 data속에 각각의 todo인거니 

      "id": "1e147b21-3c93-a961-0ce3-3a7efded3ca4",
      "title": "방 치우기",
      "content": "큰방, 침실 위주로!",
      "isDone": false

 

이렇게 4가지를 담은 객체 타입이 필요하다 그래서 TodoItem 이라는 타입은 model 폴더에서 보면

export type TodoItem = {
  id: string;
  content: string;
  title: string;
  isDone: boolean;
};

이렇게 된다. 

2. props는 어떻게 내려주는가// 타입 지정은 어디서 하는가

정답은 받는 곳!

props 내려주는 곳

<Todo key={item.id} todo={item} isActive={isActive} />

받는 곳

function Todo({ todo, isActive }: { todo: TodoItem; isActive: boolean }) {}

 

3. style-components에서 props는 어떻게?

주는 곳 

 <Button bordercolor={'red'} onClick={handleSwitchButton}>

받는 곳

const Button = styled('button')<{ borderColor: string }>`
  border: 1px solid ${(props) => props.borderColor};
  background-color: white;
  margin: 5px;
  width: 45%;
  height: 35px;
  border-radius: 10px;
  &:hover {
    background-color: ${(props) => props.borderColor};
    color: white;
  }
`;

 

## 이렇게 하면 콘솔에 warning이 뜨는데 

styled-components: it looks like an unknown prop "bordercolor" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)

이런  뭐 암튼  $를 사용하라는 거다

그냥 bordercolor 를 $bordercolor로 변경해서 진행하면 된다.

오늘의 알고리즘

2023.12.19 - [알고리즘 풀이 모음] - 크기가 작은 부분문자열

크기가 작은 부분문자열

개념정리

typescript에서 props는 받는 곳에서 type을 지정해준다.

목표 달성여부

• 과제 정리

내일 목표

• 글세..