typescript) Utility type

Utility type

1) type OmitType = omit<type, "특정 타입" | "특정타입 ">

omit: 특정 타입을 제외한 타입 모음

2) type PcikType = Pick<type, "특정 타입" | "특정타입">

pick: 특정 타입으로만 구성된 모음

3) PropsWithChildren

3-1) {children}이란
:해당 부모 컴포넌트가 포함하고 있는 자식 요소들을 나타낸다.
😤이때 헷갈리지 말아야할 부분은 부모 컴포넌트에서 props로 전달하는 것은 children과 별개로 봐야한다.

ex) 1. children 예시

function App() {
  return (
    <ParentComponent props={props}>
      <p>자식 요소</p>
    </ParentComponent>
  );
}


function ParentComponent({ props, children }) {
  return (
    <div>
      {children}   ==> 위의 <p>자식 요소</p>를 나타낸다.
    </div>
  );
}

3-2) PropsWithChildren 구성 및 예시

• PropsWithChildren이란 children을 가진 props 타입을 의미한다.

• type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined; }
  해석:
  P = unknown: 기본 props 타입을 의미한다. 기본적으로 unknown이라는 타입이 지정되어 있으며, 이는 아무 타입이나 가능하다는 것을 나타내며 생략할 수도 있다.

  { children?: ReactNode | undefined; } : children prop을 나타낸다.
  이때 children prop은 선택적(optional)으로 정의되어 있으며, 존재하지 않을 수도 있다.

ex) 1. PropsWithChildren 예시

TodoList.tsx

  ...
  
  <TodoListItem
   key={item.id}
   curTodo={item}
   ToggleButton={ToggleButtonHandler}
   DeleteButton={DeleteButtonHandler}
   >
   <p>완료<p>
   </TodoListItem>

TodoListItem.tsx

const TodoListItem = ({ curTodo, ToggleButton, DeleteButton, children }: PropsWithChildren<TodoItemProps>) => {
 
  //children은 <p>완료</p>를 나타낸다.
  ...
}

ex) 2. PropsWithChildren 예시

function Page() {
  return (
    <Modal>
      <title>Submit Form</title>
      <form onSubmit={handleSubmit}>
        <input type="text" />
        <input type="submit" />
      </form>
    </Modal>
  );
  } 

function Modal({children}: PropsWithChildren) {


  //{children} ==> <title>부터 <form>안 의 모든 요소를 말한다.
  return <div className="modal">{children}</div>;
}

4) React.FC 키워드에 대한 설명

• 함수형 컴포넌트에 적용 가능하며, children을 ReactNode로 암묵적으로 수용한다.
• react 18버전 이하에서 사용한 방법