개발/React
-
React-query 이용해서 무한 스크롤 구현하기(feat. Spring + Java)개발/React 2024. 6. 4. 17:00
직접 구현할 수 있는 부분에도 라이브러리를 쓰는 걸 별로 좋아하지 않지만, react-query는 회사에서 많이 쓰는 기술이기도 하고 철학이나 인사이트를 얻을 수 있는 점에서 공부할 거리가 있긴 하다. useInfiniteQuery를 이용해서 무한 스크롤을 구현하려는 사람에게 조금이나마 도움이 되기를 바란다.기술환경Next.js 14.1.3@tanstack/react-query: 5.28.4(react-query 버전이 올라가면서 @tanstack이 붙음)Spring boot starter: 3.2.3Spring boot starter security: 3.2.3(spring security core: 6.2.2)Spring data jpa: 3.2.3(hibernate core: 6.4.4.Final)..
-
React library with rollup invalid hook uncaught type error reading property of null(useState) npm link개발/React 2022. 12. 9. 00:47
rollup으로 만든 컴포넌트 라이브러리가 이래저래 골치 아프게 만드네요. 아직 storybook을 설정하지 않은 관계로 npm link를 사용하여 라이브러리를 테스트해야 했습니다. hook을 사용하자마자 없던 오류가 생깁니다. useState를 올바른 위치에서 문제 없이 사용했는데 invalid hook 경고가 뜹니다. useState를 읽을 수 없다는 에러도 함께입니다. 친히 공식 문서의 링크도 안내해줍니다. 관련 공식 문서. Invalid Hook Call Warning – React A JavaScript library for building user interfaces reactjs.org hook을 잘못 쓰지 않았으니 마지막 duplicate 문제입니다. 보통 npm link를 사용할 때 일어..
-
[Hooks] useState 간단 원리개발/React 2022. 9. 23. 18:39
클로저에 대해 이것저것 공부하다가 살펴봤습니다. 어느 블로그에 안내된 코드인데 뭔가 좀 이상하더라고요. 아주 살짝 수정해서 모의로 동작 가능하게 해봤습니다. useState()로 얻은 setState() 함수로 값을 저장하면 해당 컴포넌트가 리렌더링되잖아요. 이 때 컴포넌트 안에 있는 것들이 새로 만들어지고 useState(initialValue)도 호출되는데 이렇게 해서 얻는 state 값은 당연히 initialState가 아니거든요. 이 동작을 이해할 수 있는 간단한 코드입니다. 리렌더링을 재현하기 위해 useState를 수동으로 호출해줬어요. // useState.js let componentHooks = []; let currentHookIndex = 0; // How useState works ..
-
[React] 한글 입력 시 onKeyDown 이슈개발/React 2022. 8. 26. 20:59
한글 입력 후 버튼을 클릭하여 메시지를 전송하면 문제가 없는데 엔터로 메시지를 전송하면 입력이 두 번씩 들어가는 문제가 생긴다. 반복 테스트를 해보니 어느 경우엔 그 이상으로도 메시지가 중복 전송된다. 입력값에 남아 있는 문자들 때문으로 추정된다. 클릭할 때 호출되는 함수와 엔터를 입력받아 호출되는 함수는 동일하다. 엔터를 입력하기 전 마침표를 찍거나 오른쪽 화살표 혹은 End 키를 눌러 커서를 마무리해주면 문제가 발생하지 않는다. 한글로 입력을 하면 커서가 마무리 되지 않기 때문에 이를 마무리해주면 오류가 나지 않는다. 영어를 입력했을 때와 한글을 입력했을 때의 차이가 조금 존재하는데 한글 입력은 마지막 음절에 계속 밑줄이 그어져있다. 한글은 한 음절에 여러 자음과 모음이 들어갈 수 있어서 추가 입력을..
-
[Recoil] 공식 문서 selector(async) 예제 간단 풀이개발/React 2022. 8. 18. 00:10
공식문서에 있는 예제입니다. import {atom, selector, useRecoilState, DefaultValue} from 'recoil'; const tempFahrenheit = atom({ key: 'tempFahrenheit', default: 32, }); const tempCelcius = selector({ key: 'tempCelcius', get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9, set: ({set}, newValue) => set( tempFahrenheit, newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32, ), }); function Temp..
-
[React-router-dom] 페이지 변환 시 파라미터 반환 받기개발/React 2022. 8. 11. 20:32
useNavigate가 반환하는 함수를 통해 다른 URL로 이동할 수 있습니다. 이때 값을 전달할 수 있는데요. const navigate = useNavigate(); ... navigate('/someURL', {state: data}); // state를 키로 가져야 합니다. someURL 페이지에서는 데이터를 useLocation으로 받을 수 있습니다. 공식문서에는 useLocation 훅 설명이 불친절합니다. side effect를 수행할 때 사용하라고 되어 있는 정도입니다. 어쨌든 받아서 출력해봅시다. import { useLocation } from 'react-router-dom'; const Content = () => { const locate = useLocation(); consol..
-
[ESLint] React 사용을 위한 기본적인 설정하기개발/React 2022. 8. 10. 22:51
바닐라 자바스크립트 개발환경 구성에 추가적으로 더해야 할 것이 있습니다. CRA로 리액트 앱을 구성하면 eslint, prettier가 자동으로 설치되므로 따로 의존성을 추가하지 않아도 되지만 특정 버전이 필요하다면 그에 맞게 별도로 설치해줍니다. eslint는 기본적으로 jsx를 알지 못하므로 오류로 인식합니다. 이를 해결하기 위해서는 parserOptions에 ecmaFeatures.jsx 프로퍼티에 true를 설정합니다. parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true, }, } jsx 오류는 사라졌지만 새로운 오류가 등장합니다. Map 컴포넌트를 가져와 사용했는데도 no-unused-var..
-
typesafe-actions를 이용해 모듈 리팩토링 해보기개발/React 2022. 7. 14. 22:19
이건 결과물로 비교해보는 게 좋을 것 같습니다. 리팩토링 전 const ADD_TODO = 'todos/ADD_TODO' as const; const TOGGLE_TODO = 'todos/TOGGLE_TODO' as const; const REMOVE_TODO = 'todos/REMOVE_TODO' as const; let nextId = 1; export const addTodo = (text: string) => ({ type: ADD_TODO, payload: { id: nextId++, text, }, }); export const toggleTodo = (id: number) => ({ type: TOGGLE_TODO, payload: id, }); export const removeTodo =..