Frontend
![[React] 플리커링 현상 해결하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcZXbVd%2FbtsHF2CIwzQ%2FKVq1gdD7lmUqKHp9a1hkV0%2Fimg.gif)
[React] 플리커링 현상 해결하기
개발을 거의 다 마친 상황..에서 마주한 한가지 문제거슬리는 부분을 찾아냈다. 바로 플리커링(flickering) 현상이다. ⭐️ 왜 일어나고 있는 것인가?원인은 이렇다.일단 이 프로젝트는 suspense로 부모 컴포넌트가 싸여있고 빈 div를 fallback으로 두고 있다.{ path: PATH.PLANNING, element: ( }> ), },열리는 모달에는 댓글들을 불러오는 api가 모달이 열려질때 불려진다. 이 댓글을 불러오는 api가 완료되길 기다리는 동안 Suspense에서 설정해놓은 Callback인 빈 div 화면이 전체에 걸쳐서 플리커링 현상을 일으키는 것이다. 👍 해결책1. Suspense를 CommentField에 씌워준다.// ScheduleM..
짧게 알아보는 React 19 버전
React를 주로 사용하는 개발자로서 React 19 버전에서 새로 추가되는 내용과 수정되는 내용은 뭔지 간단히 알아보는 시간을 가지겠습니다. ⭐️ Compiler(컴파일러)첫번째 중요한 사실은 React에 Compiler를 추가한다는 사실입니다. 다른 프레임워크인 Astro나 Svelte는 컴파일 단계가 있어 많은 일들을 개발자 대신 해주지만 React는 컴파일 하는 스텝 없이 오직 브라우저에서 실행되어 추가적인 성능을 위해서 더 많은 코드를 작성해야 했죠.예를 들어서 useMemo, memo, useCallback 같은 hook들 말이죠하지만 React 19 에서는 compiler가 추가되어 자동적으로 memorization을 제공합니다. 따라서 19버전에서는 이러한 성가신 hook들을 더이상 사용하..
![[React hook form] 제어 컴포넌트와 비제어 컴포넌트 동시에 사용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyPHuu%2FbtsGj5tcvv2%2FaH1i5hNPj7PqNvbfBjcKVK%2Fimg.png)
[React hook form] 제어 컴포넌트와 비제어 컴포넌트 동시에 사용하기
출발점 Reack hook form은 form 을 만들때 쓰는 대표적인 라이브러리 입니다. form 구조 떄문에 어쩔 수 없는 많은 state로 부터 우리를 지켜주는 존재입니다. 또한 그에 따른 리렌더링 문제로 부터 자유롭게 해줍니다. Reack hook form는 대표적으로 비제어 컴포넌트를 사용하긴 하지만 제어 컴포넌트로도 form을 만들 수 있게 하는데요 오늘 만들어보는 form은 react hook form을 사용해 사용자가 문자를 입력할때 마다 적합한 input인지 확인하기 위해 제어 컴포넌트로 만들고 굳이 입력할 때마다 유효성 검사가 필요없는 input에 관해서는 비제어 컴포넌트로도 만드려고 합니다. 1. (Controlled Component)제어 컴포넌트란? 제어 컴포넌트는 React st..
![[React] 재조정(Reconciliation)과 key값](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FP0edt%2FbtsFW7krClX%2FSqaJ8PKPkT8xako0GTngmK%2Fimg.png)
[React] 재조정(Reconciliation)과 key값
프로젝트에서 DatePicker를 직접 구현하게 되었다. 화살표 아이콘을 누르면 한달씩 뒤 또는 앞으로 넘어가는 구조이다. date-fns 라이브러리를 사용해서 날을 생성했고 다음달 이전달로 넘어갈때마다 날짜들을 재조정 시켜주었다. 이때 문제가 발생했다. 달이 바뀔 때 마다 다시 렌더링 될때 정상 값들이 아닌 이상한 값들이 달력에 껴있던 것이였다. 몇번 달을 이동하다 보면 첫째주에서 시작해야할 1일은 다른 주에서 나오기 시작했다. 콘솔에 찍어보니 값은 정확했다. 문제는 key 값이었다. 코드를 보니 key값을 중복값으로 입력하고 있었다. const DatePickerModal = () => { useEffect(() => { editCurrentMonth(selectedDate); }, []); cons..
![[React] 불필요한 리렌더링을 막아서 6배가 빨라졌다고?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5hTL6%2FbtsFffJllwQ%2FMRVoChYkzhtcmFewMFsZDK%2Fimg.gif)
[React] 불필요한 리렌더링을 막아서 6배가 빨라졌다고?
현재 프로젝트에서 calendar 컴포넌트를 맡고 있다. calendar 컴포넌트에는 추가한 일정들을 볼 수가 있다. 각 일정들을 클릭하면 일정 상세보기 모달이 나온다.일정이 2개를 초과하면 더보기 버튼이 생기는데 클릭하면 달력이 미쳐 나오지 못한 일정이 모달을 통해 나오게 되는 구조이다. 일단 구현은 완료하였다.하지만 거슬리는 부분이 있다.불필요한 너무 많은 곳에 리렌더가 일어나는 것이다.물론 아직까지는 크기가 작은 프로젝트라 이대로 가도 괜찮을 것 같지만 찜찜한 이 마음을 풀기위해 더 좋은 방법을 생각해보기로 했다. 🔥 문제점1. recoil로 modal 상태 관리현재 modal을 열고 닫는데는 recoil을 사용중이다. export const moreModalState = atom({ key: "..
[Framer motion] width
프로젝트에서 Framer motion을 사용해 햄버거 메뉴바를 만드려고 한다. Framer motion의 example안의 햄버거 바가 딱 좋을 것 같아서 이용 하기로 했다. Framer Motion: Variant - CodeSandbox A live, editable example of the Framer Motion API codesandbox.io 바로 이 example 인데 이 예제에는 여기서는 알 수 없지만(혹은 컨텐츠가 없으니 일부러 안고친것 같지만) 한 가지 버그가 있다. 바로 햄버거 메뉴가 클릭될때 나오는 메뉴가 click 되지 않아 보이지 않아도 사실 살아 있다는 것이다. 즉 투명인 채로 컨텐츠들을 방해한다는 것이다. Framer Motion: Side menu (forked) - Co..