욕심도 참 많아

프로젝트를 하는 도중 컴포넌트 인터페이스 설정할때 useForm에 타입매개변수를 넣어주려했는데, 생각지 못한 부분에서 타입 에러가 났었다.interface testProps{ A : useForm B : useForm | useForm} 그래서 타입 매개변수안에 | 을 넣을때 A와 B의 경우 무슨 차이점이 있는지 자세히 알아보려 했다.A , B가 다음과 같이 정의되어있다고 가정해 보자 interface A { name: string; age: number;}interface B { email: string; subscribed: boolean;}interface testProps { A: useForm; B: useForm | useForm;} 이 경우, useForm는 name과 ..

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

근 1년만에 기술 블로그 업로드 입니다!.! 오늘은 사용자로부터 데이터를 수집하는데에 큰 도움을 주는 라이브러리인 react-hook-form 에 대한 글을 작성해 보았습니다. react-hook-form(이하 리훅폼이라 칭하겠습니다!)이 없다면, 저희는 간단한 회원가입을 구현함에 있어서도 하나하나 state를 선언하고, state를 validate하기위한 함수들, 에러를 위한 state등 너무 많은 기능들을 직접 구현해야 합니다. 또한, 귀찮은 것과 별개로 모든 값이 state로 연결되어 있기에 하나의 값이 변할때 마다 여러 자식 컴포넌트 들에서 리렌더링이 계속해서 발생하게 됩니다. 리훅폼을 공식 docs에 나와있는 여러개의 단어-문장으로 표현하자면 DX 폼을 구축할 때 개발자들에게 완벽한 경험을 제공..

1. div와 span 의 차이점 콘텐츠의 영역이나 그룹화를 할때 사용 다른 텍스트와 구별하기 위해 사용 div는 가로공간 전체를 차지하고 인라인요소가 아니기에 width, height 크기 지정이 가능하고 줄바꿈이 되지만 span은 인라인 요소이며 문장의 길이공간만큼 차지함 핵심은 줄바꿈!!!! 2. 이벤트 버블링 이란? 어떤 객체에 대한 이벤트가 발생했을때, 해당 객체의 최상위 부모까지 이벤트가 전달 되는 과정 html구조상 자식 요소에 발생한 이벤트가 상위 요소에 영향을 미치는 것인데 이를 차단하고 싶을때는 e.stopPropagation을 호출하면 이벤트 전파를 막을 수 있다. 3. 'Call by value'와 'Call by reference'란? 변수 혹은 객체등이 함수의 인자로 들어와 매개..