TS) React ~ event type 찾는 방법 ... 예시

예제를 통해 살펴본다.  

 

(예제: React와 Typescript 이용 / react-beautiful-dnd 이용)

 

 ...
 
 function App() {
     const [toDos, setToDos] = useRecoilState(toDoState);

     const onDragEnd = (args) => {       // args 의 타입 미지정 에러
        console.log(args);
      };
      return (
        <DragDropContext onDragEnd={onDragEnd}>
          <Wrapper>
          ...

 

args의 타입을 알아야 한다. 하지만, onDragEnd에 대해 아는 정보가 없다.

 

아래와 같이 코드를 수정한다.

 

 

 ...
 
 function App() {
     const [toDos, setToDos] = useRecoilState(toDoState);

     const onDragEnd = (args) => {       // args 의 타입 미지정 에러
        console.log(args);
      };
      return (
        <DragDropContext onDragEnd={args => console.log(args)}>  // Functional Prop
          <Wrapper>
          ...

 

사용은 함수를 따로 분리해서 사용할 것이지만, 일단 내부에 함수형 프로퍼티 형태로 정의해준 뒤에

사용하는 특성의 인자(args)에 마우스를 올리면 특성이 나온다.

 

 

 

해당 타입을 위의 args에 넣어주면 된다.

 

 

<수정된 코드>

 

 ...
 
 function App() {
     const [toDos, setToDos] = useRecoilState(toDoState);

     const onDragEnd = (args: DropResult) => {       //  에러 해결
        console.log(args);
      };
      return (
        <DragDropContext onDragEnd={onDragEnd}>
          <Wrapper>
          ...

 

---

참고)

 

 

- https://bobbyhadz.com/blog/typescript-react-onclick-event-type