React
-
react-hook-form을 사용한 form 만들기API 2023. 2. 14. 22:06
최대한 라이브러리를 사용하지 않고 구현을 하는 것에 집중을 하다가 평소에 제일 사용해보고 싶었던 라이브러리인 react-hook-form을 사용하여보았다. 그래서 react-hook-form의 기초적인 형태에 대해 작성해보고자 한다. 해당 글은 NestJS 13버전과 React-hook-form 7버전을 바탕으로 작성한 글이다. 사용한 계기 form을 일일히 만드는 것은 매우 귀찮은 일이다. 전체적인 form을 만들고, 각각의 input에 onChange를 적용하여 값이 변할 때마다 useState값을 갱신한 후 이를 제출할 때 유효성을 검사하는 이벤트를 다 작성해주고, 통과한다면 이벤트를 실행시키고, 통과하지 못한다면 에러가 발생한 부분에 문구를 출력해주는 등 이러한 작업들을 모두 일일히 작성해줘야 하..
-
[PropTypes] 리액트에서 타입 검사를 해보자!React 2022. 8. 25. 17:48
타입스크립트를 배우기 전에는 타입 명시에 대해서 크게 신경쓰지 않았다. 물론 타입 명시는 프로젝트를 만들 때 매우 중요했지만 나 혼자 작은 프로젝트를 만들었기 때문에 초기에는 타입을 명시해주지 않았다. 그리고 타입을 신경써서 만들어봐야 겠다고 생각한 뒤로는 외부 라이브러리를 사용하지 않고 약간의 꼼수를 사용해서 타입을 명시해주었다. const obj = Object.freeze ({ coffeBeans : 24, coffeShots : 2, }); 이렇게 Object.freeze를 사용하여 객체를 동결한 뒤 동결된 객체는 더이상 변경될 수 없다는 점을 이용해 불변성을 유지해주었다. 하지만 이렇게 하는 것도 한계가 있다는 것을 알고있었다. 그러다 React의 공식 문서중 PropTypes에 대하여 읽게 되..