뇌 채우기 공간

이전 글 보기 1. 함수의 타입 설정하기 함수에는 파라미터와 리턴타입을 지정해주어야한다. 특히나 input, form에서의 타입을 지정해보겠다. import React, { useState } from 'react'; type MyFormProps = { onSubmit : (form : {name : string; description: string}) => void; } function MyForm({onSubmit}: MyFormProps){ const [form , setForm] = useState({ name: '', description : '' }) const {name, description} = form; const onChange = (e:React.ChangeEvent) => { c..

이제는 타입 스크립트가 대세! 타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다. 전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하는 법을 배워야한다. 회사에서는 다 타입스크립트를 쓰기 때문에! 타입을 지정해주는 것이 자바에서는 당연한 것이었는데 자바스크립트에서는 이렇게 따로 뭔가 해야한다니. 처음에는 자바처럼 타입을 지정해주지 않아도 되는 점이 편리했는데 따로 타입 스크립트를 써야한다면 애초에 자바처럼 타입을 지정해두는게 더욱 편하지 않을까?! 리액트 앱을 시작할 때부터 타입 스크립트로 작성하는 것을 추천한다고 한다. 나는 타입스크립트에 대해서 지식이 거의 없기 때문에 일단 js로 구현하고 converting을 했지만 처음부터 ts로 작성하는 법을 배..

1. react hook form with yup https://codesandbox.io/s/react-hook-form-apply-validation-q5m00?file=/src/index.js react-hook-form-apply-validation - CodeSandbox react-hook-form-apply-validation by bluebill1049 using react, react-dom, react-hook-form, react-scripts codesandbox.io 2. position absolute align center position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 3. local환경에 ..

1. react table editable https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data tannerlinsley/react-table: editable-data - CodeSandbox tannerlinsley/react-table: editable-data using namor, react, react-dom, react-scripts, react-table, styled-components codesandbox.io https://react-table.tanstack.com/docs/examples/editable-data Examples: Editable Data Subscrib..

리액트에서 사용하는 라이브러리들 1. classnames https://www.npmjs.com/package/classnames https://chanhuiseok.github.io/posts/react-14/ [React] 리액트 classnames 활용하기 (classnames, !! 연산자) 컴퓨터/IT/알고리즘 정리 블로그 chanhuiseok.github.io 2. react-query https://maxkim-j.github.io/posts/react-query-preview https://merrily-code.tistory.com/76 https://blog.doitreviews.com/development/2021-08-27-react-query-tutorial-01/ 2021-08-..