콘요맘떼 개발일지

React Hook Form 리액트에서 폼을 관리하는 것은 생각보다 귀찮은 작업이다. Input Validation, Form Submit 등의 작업을 수행하다보면 별 거 아닌 기능에도 코드가 매우 길어지는 것을 볼 수 있을 것이다. 다행히 React-Hook-Form이라는 라이브러리를 사용하면 ReactJS와 React Native 애플리케이션을 구현할 때 매우 적은 양의 코드로도 손쉽게 폼을 관리할 수 있다. 장점 (사실 React Hook Form은 공식 사이트에서 워낙 장점을 잘 표현해놔서 직접 확인하는 것을 추천한다. 공식 사이트 링크는 위에 있다.) (1) 코드를 적게 작성해도 된다. (2) 렌더링 관점에서 효율적이다. (폼 내에서 리렌더링이 발생할 때 최소한의 리렌더링만을 수행한다. 예를 들..

이따금씩 자바스크립트 단에서 특정 element가 오버플로우 중인지 여부를 파악해야 할 때가 있다. 아래와 같은 경우를 예로 들어보자. 유튜브에서는 영상 설명이 일정 길이 이상의 텍스트일 때는 더보기 버튼을 토글함으로써 전체 내용 확인, 간략히 확인 기능을 제공하고 있다. 그렇다고 텍스트가 매우 짧을 때에도 더보기 기능을 제공할 필요는 없다. (Lofi 코딩은 그냥 코딩할 때 자주 들어서 골랐다) 이럴 때 아래와 같이 코드를 작성하면 특정 element가 오버플로우중인지 여부를 실시간으로 감지할 수 있다. defineIsOverflowing 함수는 x축 기준, y축 기준으로 element가 오버플로우중인지 여부를 검사한다. 물론 두 축 중 하나만 검사하고 싶은 경우 검사할 축을 인자로 전달받는 식으로 조..

useLayoutEffect와 useEffect는 모두 의존값의 변화에 따라 side effect 함수를 실행시킨다는 점에서 유사한 성질을 가진다. 그러나 실제 그것이 동작하는 방식에 있어서 실제로 그것을 활용하는 방향성에 있어서 차이점을 지닌다. useEffect useLayoutEffect 실행 순서 컴포넌트 렌더링 → 화면 갱신 → side effect 컴포넌트 렌더링 → side effect → 화면 갱신 side effect 함수 실행 방식 비동기 동기 useEffect문을 사용해서 DOM element의 style을 지정하는 등 mutation을 일으키는 경우 이미 화면이 갱신된 이후에 또 다시 화면이 갱신되면서 '깜빡거림'(flickering)이 발생한다. 이는 SPA의 장점을 망치는 현상 ..