[React] 커스텀 훅 만들기 로그인 화면을 구성할 때, 아이디 비밀번호 입력창을 구현하기 위해서는 State와 Onchange 함수가 필수적으로 사용됩니다. const [id, setId] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const [password, setPassword] = useState(''); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); 만약에 해당 페이지에 입력 폼이 훨씬 더 많아진다면 정말 귀찮은 일이 될 것입니다. 한 번에 두 가지 기능을 담당하도록 커스텀 훅을 ..
[React] 버튼 누르면 필터 메뉴 나타나는 기능 구현하기 1. 설명 Mui라이브러리를 활용하여 특정 버튼을 누르면 미리 지정한 옵션대로 필터 메뉴가 열람되고, 특정 버튼이나 메뉴 바깥을 클릭하면 필터 메뉴가 닫히는 기능을 구현했다. npm install @mui/icons-material npm install @mui/material import FilterAltIcon from '@mui/icons-material/FilterAlt'; import { IconButton } from '@mui/material'; const Test = () => { const FilterButton = () => { return ( ); }; return ( ); }; export default Test; 먼저 임..
React Dnd kit 정리 - 드래그 앤 드롭으로 위치 바꾸기 1. React Dnd kit란? React에서 드래그 앤 드롭 인터페이스를 구축하기 위한 패키지 세트. 끌어서 놓을 수 있는 요소를 만들고 이벤트를 관리하고 상호 작용을 구현하도록 도움을 준다. 2. 설치 npm install @dnd-kit/core npm install react react-dom Modifiers 이동 좌표를 동적으로 수정할 수 있는 기능을 제공한다. 단일 축 동작 제한 드래그 가능한 노드 컨테이너, 스크롤 컨테이너의 사각형 경계로 이동 제한 모션 고정 적용 등.. 이와 같은 기능들을 구현하기 위해서는 modifiers의 DndContext, DraggableClone을 활용해야 한다. npm install @dnd..
[React recoil] Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root. 에러 해결 1. 에러 발생 recoil 라이브러리로 비동기 통신을 하면서 위와 같은 에러가 발생하였다. 포켓몬 api 사이트에서 특정 포켓몬에 대한 데이터를 가져오려는 시도를 했다. console창을 보면 정상적으로 데이터를 가져오는데도 불구하고 렌더링이 되지 않고 loading상태에서 머물러 있는 것을 확인할 수 있었다. 대략적인 코드는 다음과 같았다. export const pokemonInfoQue..
[React] 스프레드 연산자와 상태 업데이트, 불변성 기존 값을 그냥 단순하게 수정하는 방법으로는 React가 상태가 변경되었음을 감지할 수 없어서 구성 요소를 리랜더링 할 수 없다. 상태 개체에 대한 참조가 변경되었음이 확인이 되어야만 리랜더링을 진행할 수 있는데, 이를 위해 스프레드 연산자를 사용한다. 리렌더링 불가능 한 경우 const object = { a: 1, b: 2 }; object.b = 3; 리렌더링 가능한 경우 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 스프레드 연산자는 기존의 state값은 유지시키고 그것의 복사값을 가진 새 개체를 만들어 낸다. 이 때 상태 개체에 대한 새로운 참조가 만들어지므로 ..
