성연커밋 : )

많은 데이터를 확인할 때, 보통 페이지네이션 또는 인피니트스크롤로 구현을 하곤 한다. 저번 프로젝트에서는 페이지네이션을 이용하였는데, 이번에는 인피니트 스크롤을 이용해보았다. 인피니트 스크롤이란? 사용자가 버튼을 누르거나, 특정 지점을 스크롤 할 때, 새로운 데이터를 가져오는 방법이다. reactQuery를 이용하여, 데이터를 패치하여 인피니트 스크롤을 구현해보겠다. reactQuery의 포스팅은 여기에서 했으니 궁금하면 먼저 보고오는 것도 좋다. useQuery useMutation 무한 사용을 위한 옵션쿼리는 다음을 추가한 useQuery hook과 동일하며 isRefetching에서 차이가 있다. useInfiniteQuery에 대해서 알아보자 data는 infinte query 데이터가 담겨있는 ..

modal은 공통 컴포넌트로 많이 사용되곤한다. 여기서 portal은 무엇일까? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다. 리액트 공식문서 컴포넌트 렌더링 메서드에서 엘리먼트를 반환할 때 그 엘리먼트는 부모 노드에서 가장 가까운 자식으로 DOM에 마운트된다. portal을 사용하는 이유는? 전역모달을 띄우는 범용적인 방법은 바로 하위에 Modal 컴포넌트를 만든 뒤 전역상태를 통해 show / hide를 관리하는 것이다. 상위단에 DOM노드를 생성했을뿐만 아니라, 단순한 알람모달의 경우에도 전역상태에 의존한다는 불합리함이 존재한다. 모달이 켜진 상태에서 업데이트 등으로 부모 엘리먼트가 리렌더링이 된다면, tree구조에 따라 자식 모달 역시 영향..

저번은 ReactQuery의 useQuery에 대해 포스팅하였다. 이번 프로젝트에서는 get을 제외한 모든 메소드에서도 데이터 패치 관리를 해보자고 해서 SWR이 아닌, ReactQuery를 이용하여 데이터 패치를 하기로 하였다. useMutation 서버의 데이터를 업데이트 하는 경우에 사용하는 hook 데이터를 가져오기만 하는 GET메소드는 useQuery를 사용한다. 공식문서를 보면 다음과 같이 나와있다. const { data, error, isError, isIdle, isLoading, isPaused, isSuccess, mutate, mutateAsync, reset, status, } = useMutation(mutationFn, { cacheTime, mutationKey, networ..

SVG란? SVG란 ‘Scalable Vector Graphics’의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 그래픽용 XML기반의 형식 우리가 흔히 아는 이미지 파일은 .jpeg .png와 같은데, 확대를 하면 화질이 깨지는 것을 볼 수 있는 반면, .svg파일의 이미지는 화질이 깨지지 않는다. .png .jpeg는 화질이 깨지는 이유가 무엇일까? 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현이다. 원래 크기보다 크게 보여지게 할 경우 이미지가 깨져서 보인다 React에서 svg파일을 사용하는 방법을 알아보자 1.img 태그로 src에 이용하는 경우 기존의 png, jpeg와 동일하게 사용하면 된다. import File from 'assets/file_icon...

useEffect must not return anything besides a function, which is used for clean-up. 위와 같이 useEffect안에서 clean-up함수를 필요로하다는 에러를 보였다. 처음에는 return으로 unmount할 때 실행을 해주지 않아서일까? deps인자를 주어야하는데, 주면은 화면이 아예 뜨지 않으면서 여러 에러들을 발생했었다. 하지만, 에러 코드에 설명이 나와있었다. It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately: 현재 ..

리액트 쿼리의 버전이 v4로 업데이트 되면서 설치 방법이 바뀌었다. yarn add react-query 위의 코드로 설치하면 type에러 및 react-query가 계속 실행이 되지 않을 것이다. 설치는 이렇게하자! yarn add @tanstack/react-query react-query로 데이터 패치를 해보자. post ⇒ useMutation get ⇒ useQuery 를 이용하여 데이터 패치를 할 수 있다. post를 할 때는 굳이 useMutation을 해야하나 싶은 생각에, 이번 프로젝트에서는 get 데이터패치만 react-query를 이용하려고 한다. react-query를 이용하기 위해서는 _app.tsx에서 리액트쿼리를 사용하겠다고 세팅을 해주어야한다. import { QueryCli..

서버 상태관리를 하는 대표적인 두가지 라이브러리는 RactQuery와 SWR이 있다. 즉, 두 라이브러리 모두 data fetch를 도와주는 라이브러리이다. 사용하는 이유가 무엇일까? 어떤 데이터를 언제 fetch하면 되는지 목표만 기술하면 된다. 동일한 API 요청이 여러 번 호출될 경우 한 번만 실행 자연스럽게 흐름 파악 가능 SWR import useSWR from "swr"; function Profile() { const { data, error } = useSWR("/api/user", fetcher, options); if (error) return failed to load; if (!data) return loading...; return hello {data.name}!; } data와..

리덕스란? 전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장되며, 상태를 변경하는 것은 어떤 일이 일어날지를 서술하는 **액션(action)**을 내보내는 디스패치(dispatch) 것이 유일한 방법 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 명시하기 위해서는 **리듀서(reducer)**의 작성이 필요하다. reducer는 변화를 일으키는 함수로써 전달받은 액션을 가지고 새로운 상태를 만들어서 스토어에 전달한다 이 모든 설계는 데이터가 단방향으로 흐른다는 전제하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했다. 그러면 Redux Toolkit는 무엇일까? 리덕스를 위한 도구 모음(키트) 리덕스를 더 쉽게 사용하기 위해서 나왔다 Redu..

개발해보면서 값을 확인하기 위해 우리는 console.log를 많이 활용하곤 한다. 값을 확인해보는데, 같은 console이 두 번씩 찍히는 부분을 발견하였다. 뭐때문인가 하고 코드도 계속 찾아봤지만, 나는 코드에 콘솔이 하나밖에 없었다. 이유를 찾아보니, index.tsx에서 컴포넌트가 에 감싸져 있으면 두 번씩 콘솔이 찍히는 것이었다. index.tsx를 위와 같이 고치면서 해결은 되었다. StrictMode가 무엇일까? StrictMode는 리액트에서 제공하는 검사 도구이다. 개발 모드일때만 디버그를 하며, 해당 태그로 감싸져 있는 부분은 자손까지 검사를 한다!안전하지 않은 생명주기를 가진 컴포넌트라든지, 권장되지 않는 부분이 있다든지 배포 후 문제가 될만한 이슈들을 미리 잡는 모드라고 보면 되겠다..

React내에서 cloneElement()라는 것이 있다. cloneElemenet란? 쉽게 말해서 엘리먼트를 복제하는 것! 위 코드를 보면, InputGroup의 id와 input의 id를 각각 지정해주었어야한다. id가 다를 경우 human error를 발생한다… 이 경우, inputGroup에서 사용한 id를 input의 id로도 사용하고 싶기 때문에 cloneElement를 이용할 것이다. React.cloneElement( element, [config], [...children] ) element를 기준으로 복사하고, 새로운 React 엘리먼트를 복사하고 반환한다. config는 key와 ref 그리고 모든 props를 포함한다. config에 key와 ref가 없다면 원본 엘리먼트의 key와..