I T H

1. onClick 이벤트의 타입 e: React.MouseEvent 2. onSubmit 이벤트의 타입 event: React.FormEvent 3. onChange 이벤트의 타입 e: ChangeEvent

frontend의 회원가입의 흐름과, 어떤함수들을 사용하고, 타입스크립트를 어떻게 적용하는지에 대해 작성할 것임. 들어가기에 앞서 이번챕터의 사용할 훅들과 함수들을 미리 알아보자! - useForm: form을 관리하는 커스텀훅으로 state와 onChange함수의 많은 양을 줄이고 반복적인 코드의 양을 줄일 수 있다. 회원가입과 같이 입력받을 컬럼들이 많을 경우 사용하면 유용할 훅이라고 볼수있다. useFrom은 여러가지의 리턴 props을 가지고 있다. 필자는 register, handleSubmit, reset, watch 등을 사용했다. - 입력받을 변수 타입들에 대한 ts파일을 만들어서 import해서 사용함. - 지난 챕터에서 미리 만들어둔 useAddDispatch를 사용해 리듀서를 호출할 ..

이번시간에는 상태관리 라이브러리인 리덕스를 사용해보겠다. tsx파일에서의 리덕스 적용과 리덕스를 효율적이고 복잡하지 않게 로직을 짤수있는 라이브러리인 redux-toolkit을 사용할 예정. - 리덕스 툴킷을 사용하면 createSlice를 통해 action과 reducer를 효과적으로 사용할 수 있다. 흐름: ui -> action -> reducer -> store -> ui 사이클이 형성된다. Redux hooks의 기술 - useDispatch : action을 생성해준다. 즉 버튼클릭과 같은 이벤트 실행시 reducer를 호출하고 reducer는 새로운 store를 생성함. action 객체가 바로 store에 전달되는것이 아닌 reducer를 통해 store의 상태값을 변환시켜주는 것임. re..

- myschedule project는 나의 스케줄에 관련된 모든 데이터를 관리하는 프로젝트임 - frontend 환경은 react with typeScript, backend 환경은 node.js, db는 mongoDB를 사용할 예정이다. 1. 먼저 프로젝트 이름을 정하고, 폴더이름을 만든다. - my-schedule 폴더 아래 front-react폴더와 back-node-mongodb 폴더를 만들었음. 2. 타입스크립트가 적용된 탬플릿이 포함된 리액트를 install 해보자! - front-react폴더로 이동후 Terminal - newTerminal 클릭 후 아래와 같이 설치한다. - typeScript 탬플릿과 함께 리액트를 현재경로( " ./ ")에 설치한다는 뜻임. - 설치가 정상 완료됬을때..