끄적끄적

현재 많은 라이브러리들이 제공하는 Modal창들이 있지만, 각각 생긴것 들이 모두 다르고, api가 달라 여러개를 동시에 쓰기가 쉽지 않습니다. 또한 react를 잘 이용하는 느낌으로 사용하기 위해 나만의 모달창을 하나 만들어 보겠습니다. 느낌새는 ant design의 모달과 약간 유사하게 제작을 해보았지만, 커스텀을 통해 어느정도의 수정이 가능하도록 해보겠습니다. 가장먼저 모달 컴포넌트의 본체를 만들겠습니다. 1. MyModal.js import React from 'react'; import styles from './MyModal.module.css'; export default function MyModal({ open, title, bodyStyle, children, onCancel, foot..

사용자와의 인터랙션중에 수많은 API요청이나, 액션들로 인해 우리의 사이트가 느려질 수가 있습니다. 이중 가장 흔한 건 scroll event, keydown event .. 같은 종류들입니다. 오늘은 scroll event를 인식할 때 동작 하기 위한 throttling 과 debounce에 대해 알아보겠습니다. 우선 둘다 이벤트나 함수 실행의 빈도를 줄이고 효율성을 올리기 위한 함수들입니다. 1. Throttling Throttle 는 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아, 한번씩 출력을 제한한다. 예시로는 javascript 라이브러리인 lodash 의 throttle, debounce를 사용하겠습니다. _.throttle(func, [wait=0], [options={}]) ..

리엑트를 사용하는 사람들한테 가장 많은 실수를 유발시키거나, 문제를 일으키는 부분은 바로 state를 set시키는 과정이라고 생각합니다. 개인적으로 질문을 주시는 분들 중 절반정도의 분들은 setState의 비동기 문제때문에 원치않은 state를 사용하고 계셨습니다. 이처럼 setState는 비동기 작업으로 우리가 언제! 정확히 실행 되는지를 보장할 수 없습니다. 따라서 한 함수내에서 또는 같은 실행환경?에 있는 곳에서 같은 같은 state를 여러번 set시키는 것은 안됩니다. 하지만 꼭 사용을 하고 싶거나, 그래야만 하는 상황이 존재한다면 방법이 한가지 있습니다. 바로 함수형 setState입니다. 위와같이 객체의 형태가 아닌 함수의 형태이기때문에 큐에 넣고 순차적으로 실행할 수 있게 해줍니다. 위와 ..

React 개발하다보면 콘솔 창에 한번쯤은 봤을 경고문이 있습니다. " Each Child in an array or iterator should have a unique 'key' prop " 특히 리스트 형식의 구조를 짜다보면 map 같은 반복문을 통해 요소를 return 하는 형식도 많이 사용합니다. 그럴때 각 요소의 식별을 위한 값이 바로 key 값입니다. 어떤 데이터들은 각 데이터들을 식별할 수 있는 고유의 값인 ID를 가지고 있지만, 그렇지 않은 것들에게 우리는 종종 index를 이용하여 key값에 부여했습니다. 하지만 이 index를 이용한 key값 부여에는 우리가 예상하지 못하는 오류가 생길 수 있습니다. 요소가 추가되거나 삭제될때 key값이 고유한 값이 아닌 index로 하게 되면 요소가..

개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다. 가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고 Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다. 오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다. 1. 파이어베이스에 로그인하여 프로젝트를 생성합니다. 2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다. 3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다. npm install firebase 그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다. // firebase_config.js impo..

HTML 요소에게 id 값이나 class 값을 주어 직접 DOM요소를 조작하는 경우는 매우 많습니다. 하지만 React에서 DOM요소를 직접 컨트롤 하는 것은 좋은 방법이 아니라고 생각합니다. 왜냐하면 컴포넌트 재사용성으로 인해 여러 곳에서, 여러번 쓰일 가능성이 있기 때문입니다. react에서는 dom 요소에 직접 접근할수 있게 해주는 ref 라는 것이 있습니다. ref는 포인터 같은 요소로 요소를 참조할 수 있게 해줍니다. ref는 클래스형 컴포넌트 / 함수형 컴포넌트 임에 따라 사용법이 다르며, 하나씩 살펴보도록 하겠습니다. (ref는 많이 사용하지 않는 것이 좋습니다. ref는 어떤일이 일어날지 예상하기 힘들수 있으며 원하는 모든 동작은 state와 props를 통해 해결할 수 있습니다.) 1. ..