Life is connecting the dots .

최근 프로젝트를 하면서 useImperativeHandle hook에 대해 알게 되었다. 이번 포스팅은 해당 hook이 무엇인지, 언제 사용하는지, 어떻게 사용하는지에 대해 정리해 두고자 작성한다. 정의useImperativeHandle은 React Hook으로 ref로 커스텀 메소드를 만들 수 있게 해 준다. 다시 말하면, 사용자 정의 ref 핸들러를 부모 컴포넌트에서 사용할 수 있도록 노출시킬 수 있다. 사용법은 컴포넌트 최상위 레벨에서 useImperativeHandle을 호출해서 노출할 ref에 커스텀 메소드(createHandle)를 작성해 준다. // (참고) React v19// (1)import { useImperativeHandle } from 'react';// 자식 컴포넌트functi..

프로젝트 [리스티웨이브]를 하면서 점점 기능이 늘어남에 따라 API도 늘어나고 있다. 리액트쿼리를 이용해서 서버 상태를 동기화해주고 있는데 useMutation을 사용해 API를 호출할 때 다음과 같이 사용하고 있다.  // 삭제 뮤테이션 const deleteMutation = useMutation({ mutationFn: deleteNotice, onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAdminAllNotice] }); }, }); // 알림 보내기 뮤테이션 const sendAlarmMutation = useMutation({ mutationFn: sendNotic..

이 글은 React 프로젝트를 하면서 Zustand와 Recoil을 사용하여 상태 관리를 구현했던 경험을 바탕으로 프로젝트에 Zustand를 선택한 이유를 되짚어 보기 위해 작성한 글이다. 과거 Zustand로 상태관리를 구현한 코드를 다시 보면서 해당 라이브러리를 선택한 이유와 장점에 대해 간단하게 글로 정리해 보았다. Zustand를 선택한 이유프로젝트에서 전역 상태관리를 사용한 이유는 사용자 정보와 같이 여러 컴포넌트에서 사용하는 정보를 관리할 때, 상태 변화에 따른 불필요한 렌더링 최소화 하기 위해 사용했다. 프로젝트에 적용한 부분은 사용자 아이디를 여러 컴포넌트에서 필요로 한 경우가 많았고, 로그인 및 로그아웃 상태를 전역으로 관리하는 것이 더 효율적이라고 판단하여 사용자 상태를 전역상태로 설정..

지난 프로젝트를 진행하면서 Next.js에 기본값으로 StrictMode 값이 true로 설정되어 있어서 버그를 발견하고 예방할 수 있었다. 그때의 상황을 대략 설명하자면 컴포넌트 안에서 useEffect를 실행했었고, useEffect의 콜백함수로 API를 호출하는 중이었다. 단순히 데이터를 불러오는 API라면 여러 번 호출해도 이상 없겠지만, 해당 API는 로그인 인증 관련된 부분이어서 동일한 데이터를 두 번 호출했기 때문에 에러가 발생하는 상황이었다. 결론적으로 컴포넌트가 다시 마운트 될 때, 이전 API요청을 취소하는 방법으로 해결했고, 개발환경에서만 React StrictMode가 동작하므로 배포환경에서는 문제가 안 되는 것을 확인했지만 혹시 모를 상황에 대비하여 코드를 제대로 작성할 수 있었다..

이번주는 기존에 완성한 개인 프로젝트를 다시 점검하는 시간을 가졌다.👩‍🔧 기능 동작에 이상이 없는지 재점검하고 리팩토링한 코드를 다시 리팩토링도 해보았다. 이 중 사용자가 게시물을 등록하기 위해 작성하는 양식 중 이미지 업로드 기능을 확인했을 때, 기능은 잘 동작하지만 사용성을 조금 더 개선하고자 계획하였다. 현재 이미지 업로드 기능 동작 문제 상황 ❏ 업로드를 클릭한 공간에 이미지가 업로드된다. ❏ 이미지 수정은 가능하지만 삭제가 안된다. ❏ 이미지 업로드 완료까지 다소 시간이 걸린다. challenge ❏ 어떤 업로드 버튼을 클릭하던 왼쪽부터 순서대로 사진 업로드 하기 ❏ 업로드한 이미지 삭제 구현하기 (+. 삭제해도 이미지는 좌측정렬을 유지) ❏ 이미지 업로드 중인 동안 대체 UI 보여주기 이미지..

리액트 쿼리는 웹 어플리케이션에서 데이터 패칭, 캐싱뿐만 아니라 서버 상태의 데이터 동기화 및 업데이트를 손쉽게 해주는 상태 관리 라이브러리이다. 리액트 쿼리 라이브러리 버전4에서는 TanStack Query로 이름이 변경되어 기존 리액트에서만 사용 가능했던 부분을 Solid, Vue, Svelte와 같은 다른 프레임워크에서도 사용이 가능하도록 업데이트되었다. 리액트 쿼리를 사용하면 다음과 같은 장점이 있는데, 무엇보다 손쉽게 사용할 수 있고 내장되어 있는 매소드를 통해 캐시와의 상호작용을 효율적으로 할 수 있는 점 때문에 많이 사용하는 라이브러리가 되었다. ✔️ 데이터 패칭, 자동 업데이트, 캐싱, 오류처리 등 최적으로 서버 상태 관리해 줌으로써 효율적으로 데이터를 다룰 수 있도록 해준다. ✔️ 별도 ..

이 글을 쓰는 이유는 그동안 React를 당연하게 공부하고 당연하게 사용해 왔기 때문이다. 그러다 보니 React를 왜 배웠는지 왜 프로젝트에 사용하게 되었는지에 대한 질문을 받으면 어떤 이유를 설명해야 할지, 무슨 이유가 특별히 더 중요한지에 대해 고민이 앞서 스스로 명쾌한 대답을 하지 못하는 것 같다는 생각이 들었다. 그래서 오늘은 스스로에게 질문한 내용을 글로 남기려고 한다. React 란 리액트는 사용자 인터페이스(UI)를 담당하는 자바스크립트 기반 라이브러리로, 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. SPA 하나의 페이지로 만들어진 웹 애플리케이션을 의미한다. 페이지 이동 시 추가적인 서버의 접속 없이 필요한 데이터만 자바스크립트 안에서 동적으로 로드하여 화면을 변경한다. ..

리액트에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 사용하여 전달한다. 또한 한 컴포넌트 안에서는 변경 가능한 데이터를 다루기 위해 State를 사용한다. 이렇게 props와 state를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트로 즉, 한쪽 방향으로만 데이터가 이동하게 된다. 그렇다면 다음과 같이 서로 다른 데이터의 흐름에 있는 컴포넌트에서 서로 같은 데이터를 공유하고 싶은 경우에는 어떻게 하면 될까? 그럴 때는 공통 부모 컴포넌트에 state를 만들고 데이터를 props를 통해 사용하고자 하는 컴포넌트에 전달해야 한다. 하지만 이와 같은 props drilling은 컴포넌트가 여러 계층을 가지고 있는 복잡한 구조에서는 비효율적이고, 추적하기가 쉽지 않다. Context ..