Typescript3 [typescript] custom hook 과 typescript 개요 회원가입 기능을 만드는 도중 닉네임과 아이디, 회원가입의 값을 다루는 기능이의 코드가 중복된다는 점을 알고 custom hook을 사용하여 구현하였다. 확장자를 ts로 설정하다보니 타입스크립트를 적용하게 되었는데 CustomHook 작성 중 오류가 발생하였다. 에러(1) - 이벤트리스터에 타입을 지정해 줘야해서 ChangeEvent 라는 타입을 지정해 주었고 에러가 발생하였다. - 에러를 해석해 보면 'value' 속성이 'EventTarget & Element' 유형에 없습니다. 로 해석할 수 있다. 해결(1) - 위 사진처럼 parameter 의 타입과 리스너의 타입을 지정해주었더니 해결되었다. 에러(2) - 그 이후에 에러가 하나 더 발생하였는데 custom hook을 import해서 사용하는.. 2023. 3. 6. [Typescript] Type '{ children: never[]; }' has no properties in common with type 'IntrinsicAttributes'. 에러 Components 안에 img태그를 넣으려고 하다가 아래사진과 같은 에러가 나왔다. - components안에 들어갈 요소의 타입을 정해주지 않아 발생한 오류 같았다. Components 구성 - 상위 Components - 하위 Components 해결 방안 하위 Components의 children을 넣고 타입을 정의해 주었다. - 하위 Components ! 타입 설정시 ReactNode, ReactElement 중 아무거나 해도 상관없다. 좀 더 정확하게 설정해주고 싶다면 원시타입은 허용하지 않는 ReactElement가 좀 더 정확하다고 할 수 있다. 2023. 2. 25. [Typescript] ReactNode와 ReactElement (feat. ReactChild) ReactNode 와 ReactElement (+ ReactChild ) 자식 요소를 감싸는 래퍼컴포넌트를 작성하다 자식요소의 타입을 정하라는 표시가 보였다. 검색해서 찾아보니 ReactNode, ReactChild, ReactElement 3가지 중 하나의 타입을 적용해야 할 것 같았다. 1. ReactNode ReactNode는 ReactElement뿐만 아니라, string, number, boolean 등 원시타입까지 포함하고 있다. 즉 ReactNode는 리액트 애플리케이션에서 보여지는 모든 것들 이라고 볼 수 있다. 2. ReactElement (+JSX.Element 도 사용 가능하다) 커서를 올려보면 위 사진처럼 나오는데 이게 무슨 뜻일까 검색을 해보니 원시타입은 허용하지 않는 jsx 요소.. 2023. 2. 3. 이전 1 다음
