Type Script/Type 적용 (9) 썸네일형 리스트형 [TypeScript] useParams 값을 props내려줄 때 type오류(string,undefind) 한 페이지 파일에서 useParams를 사용해 얻은 id값을 다른 컴포넌트로 props내려주려하니 오류가 났다. props로 보내서 다른 컴포넌트에서 그에 맞는 id값에 따라 api를 호출하고 싶었으나,, { id: string | undefined; }' is not assignable to type 'string'. { id: string; }' 형식은 'string' 형식에 할당할 수 없습니다 .. 등의 type 오류들이 계속 발생했다. useParams사용한 파일 코드 const { id } = useParams(); return ( Gender ... props받는 파일 코드 export default function EmotionDoughnutChart(id ) { ... 해결 props받는 .. [TS] Form Regex 정규식 표현의 Type은? RegExp Regex "정규식"과 "정규표현식"은 같은 말입니다. "정규표현식"을 줄여서 "정규식"이라고 합니다. 영어로는 "Regular Expression (레귤러 익스프레션)"이라고 하는데, 이것이 너무 길기에, Regexp 또는 더 줄여서 Regex 라고 간편히 기술합니다. "정규표현식"이든 "Regular Expression"이든, 단어만 보고서는 무슨 뜻인지 알 수 없게 되어 있는데, 정규식이라는 것은 쉽게 말해서, "문자열을 다루는 공식"입니다. 수학에 숫자를 다루는 공식이 있듯이, 프로그래밍에서 "ABC" "가나다라" 등의 문자열을 처리할 때 사용하는 것입니다: 참고사이트 Type 적용 Form Regex 를 통해 유효성 검사를 하는 중 이것에 대한 Type을 작성해야했다. const email = .. [TS] useState type 기존 useState를 작성한 React 파일을 TypeScript 파일로 변환하는 작업을 진행했다. 아래 코드처럼 선언 후 이용한 출력되는 article. 에서 다 오류가 났다. const [article, setArticle] = useState({}); ... return( ... [ 사용자 ID : {article.id} ] ... ) 이를 TypeScript를 적용하여 아래 코드로 작성하자 해결되었다. 초기 state값이 {}로 줬더니 아래 코드에서 err가 나서 null로 변경해준 후, 밑에 출력되는 코드에서 article?.id와 같이 ?를 붙여 옵셔널체이닝을 시켜줬더니 적용되었다. interface articleInterface { id: number; ... } const [article.. [TS] 객체로 이루어진 배열 type(feat.props) List 파일(item을 담고있음) articleInterface는 배열안에 들어가는 각각의 객체로 이루어진 item이다. articlesInterface는 그 객체로 배열이 이루어져 있다는 것을 의미한다. interface articleInterface { id: number; title: string; ... } interface articlesInterface { articles: articleInterface[]; } export default function ArticleList({ articles }: articlesInterface) { .. Item 파일 하위 파일에는 articleInterface만 필요하기때문에 해당 interface작성을 하였다. 그리고 구조분해할당에서는 그냥 ({ar.. [TS]TypeScript에서 useRef type 사용 방법 https://curryyou.tistory.com/488 [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값 curryyou.tistory.com 블로그내용) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number.. [TS] 객체 type (아직 정해지지 않은 key,value) 아직 정해지지 않은 key와 value로 이루어진 객체의 type은 아래와 같이 작성하였다. interface useFormInterface { [key: string]: string | number; } export function useForm(initialValues: useFormInterface) { * Type Alias + Index Signature + Union Type type alias의 경우 저렇게 type을 사용하여 따로 만들어 사용하는 것, index signature는 [key: string] 같이 어떤 key값이 들어올지 모르겠으나 전부 통틀어 string 타입으로 지정하는 방식을 말한다. 그리고 union type은 string | number처럼 or인 |로 여러 타입을 .. [TS] change, submit e매개변수 type, onChange type (feat.Type보는 방법) Input 과 textarea 안에 들어가는 value를 이용해서 setState를 시켜주는 useHook을 작성 중 ts로 변환하려고 한다. change Event의 매개변수로 e 에 대한 type을 작성할 때는 아래와 같이 작성한다. (e: React.ChangeEvent) 나는 input과 textarea가 동시에 쓰여서 다음과 같이 작성했다. e: React.ChangeEvent | React.ChangeEvent 만약 input 태그가 아니라 textArea 태그에서 사용하려 한다면 제네릭 인자를 HTMLTextAreaElement로 바꿔주면 되며, onChange 이벤트가 아니라 마우스 클릭 이벤트라면 이벤트 타입을 React.MouseEvent 이런 식으로 바꿔주면 된다. + submit 의.. [TS] children Type 다음과 같이 작성함 children?: React.ReactNode; https://www.carlrippon.com/react-children-with-typescript/ React Children with TypeScript Different ways the React children prop can be typed with TypeScript www.carlrippon.com https://velog.io/@ye-ji/React%EC%97%90%EC%84%9C-Children%EC%9D%84-JS%EC%99%80-TS%EC%97%90%EC%84%9C-%EA%B0%81%EA%B0%81-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 React에서 .. 이전 1 2 다음
