뒤죽박죽 공책 뒤죽박죽 공책

최대한 라이브러리를 사용하지 않고 구현을 하는 것에 집중을 하다가 평소에 제일 사용해보고 싶었던 라이브러리인 react-hook-form을 사용하여보았다. 그래서 react-hook-form의 기초적인 형태에 대해 작성해보고자 한다. 해당 글은 NestJS 13버전과 React-hook-form 7버전을 바탕으로 작성한 글이다. 사용한 계기 form을 일일히 만드는 것은 매우 귀찮은 일이다. 전체적인 form을 만들고, 각각의 input에 onChange를 적용하여 값이 변할 때마다 useState값을 갱신한 후 이를 제출할 때 유효성을 검사하는 이벤트를 다 작성해주고, 통과한다면 이벤트를 실행시키고, 통과하지 못한다면 에러가 발생한 부분에 문구를 출력해주는 등 이러한 작업들을 모두 일일히 작성해줘야 하..

immer 리액트에서 가장 중요한 점은 업데이트를 하고자하는 객체, 배열은 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해줘야한다. 아래 코드는 대표적인 예이다. const user = { name:'JACK', age:22, } const newUser = { ...user, age:22 } 이처럼 리액트는 불변성이 매우 중요한데 위의 예시처럼 간단한 객체 혹은 배열이라면 얕은 복사를 통해 수정하는 것은 어렵지가 않다. 하지만 위처럼 코드가 단순하지 않다면 코드가 매우 길어지며 복잡해지기 시작한다. 만약 객체 속에서 아이디를 찾은다음에 그 아이디가 작성한 게시글을 찾아 해당 게시글에 댓글을 추가하는 코드를 작성할 때 불변성을 지키며 코드를 작성하면 아래와 같다. // state에서..