혼자 적어보는 노트

불필요한 useEffect 제거하기 무분별하게 useEffect를 사용하게 되면 버그가 생기기 쉽고 사이드 이펙트 때문에 디버깅을 하기 어려울 때가 있다. 또한 useEffect 없이 구현할 수 있음에도 useEffect를 사용함으로써 불필요한 렌더링이 생기기도 한다. 나 또한 코드를 작성할 때 습관적으로 useEffect를 사용해 왔던 것 같고 이전에 관련 내용을 읽은 적은 있었으나 의식적으로 다른 코드로 대체할 생각을 하지 않다 보니 습관 그대로 쓰는 경우가 있었다. 이번에 회의에서 useEffect 사용을 자제 하자는 이야기가 나와서 다시 직접 작성하며 정리하게 되었다. 🔗 참고 문서 : https://react.dev/learn/you-might-not-need-an-effect 참고 문서에서 대..

직접 적용해서 사용해본 적은 없지만 useLayoutEffect의 존재에 대해 알게 되어 useEffect와 비교하며 정리를 해보기로 했다. useEffect 컴포넌트들이 layout과 paint과정을 거친 이후에 실행된다. 비동기적으로 실행 되며 paint가 된 이후에 실행되기 때문에 useEffect 내부에 dom을 변경하는 코드가 있다면 사용자가 깜빡임을 경험하게 된다. const Home = () => { const [number, setNumber] = useState(0); useEffect(() => { setNumber(333); }, []); return ( {number} ); }; 이와 같은 코드를 작성했다면, 컴포넌트가 렌더링, paint 된 이후에 setNumber로 인해 numb..

상세 페이지의 Sidebar에 댓글 아이콘을 누를 경우 상세페이지 하단의 댓글 컴포넌트로 화면을 이동시키는 리모콘 기능을 구현하기로 했다. useMoveScroll hook 작성 function useMoveScroll(element: HTMLElement | null) { const onMoveToElement = () => { element?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return { onMoveToElement }; } element.scrollIntoView 이번에 처음 알게된 API인데 해당 element로 스크롤을 이동시켜준다. behavior으로 애니메이션을 정의할 수 있고 block, inline 옵션으로 수직/..

props로 전달된 값에 따라 style을 지정하고 싶을 때 작성 해야 할 style이 길 경우 css의 템플릿 리터럴을 사용하여 작성할 수 있다. import { css } from "@emotion/react"; const Button = styled.button` display: ${({ block })=> block? 'block': 'inline-block'} ${({ styleType }) => styleType && css` background-color: black; color: white; `} `; Global style 적용 Emotion의 Global을 사용하여 reset할 style울 지정할 수 있다. import { css, Global } from "@emotion/react"..

아이폰의 heic 파일을 업로드할 경우 이미지가 엑박이 뜨는 현상이 발생했다. 업로드 시 heic파일을 제한하면 되겠지만 사용자의 편의를 위해 변환해주는 방법을 알아보았다. heic2any 라이브러리 사용 간단하게 라이브러리를 설치하여 해결할 수 있었다. import heic2any from 'heic2any'; const UploadImage = ({ onChange, defaultImage, ...props }) => { const [imageSrc, setImageSrc] = useState(defaultImage); const fileInputRef = useRef(null); const handleFileChange = async (e) => { let fileBlob = e.target.fil..

이미지 업로드시 이미지 압축 프로젝트 리팩토링을 하는 과정에서 이미지를 등록할 때 제한이 없었어서 용량 제한을 걸어주었었다. 하지만 사용자 입장에서 불편함이 느껴져서 차라리 사용자는 자유롭게 업로드를 하고 프론트에서 압축을 해서 서버에 보내주는 방법으로 변경을 하게 되었다. browser-image-compression 라이브러리 사용 const actionImgCompress = async (fileSrc) => { const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true, }; try { return await imageCompression(fileSrc, options); } catch (error) { alert(erro..

Redux-Persist state를 통해 상태관리를 하면 앱을 종료하거나 새로고침 시에 저장되어 있던 state들이 사라지게 된다. 이 때 state를 유지하기 위해 localStorage나 sessionStorage를 사용하는데 Redux-Persist를 사용하여 설정해두면 알아서 localstorage나 sessionstorage에 state의 상태를 저장시켜주고 꺼내씀으로써 state를 유지시킬 수 있다. 1. 설치 yarn add -D redux-persist 타입스크립트 적용 시 -D @types/redux-presist를 설치해주어야 한다. 2. 사용방법 store/index.js import { tasks } from "./tasks"; import { combineReducers, cre..

이전에 Vanilla Javascript로 디바운싱을 구현해본 적 있었는데 이전에 만들고 있던 React 사이드 프로젝트인 todoList를 리팩토링 하면서 적용해보면 좋을 것 같아서 디바운싱을 간단하게 구현해보려고 한다. debounce 연속으로 호출되는 함수들 중 마지막 함수(or 처음 호출된 함수)만 호출하도록 하는 것 todoList의 step값이 onChange될 경우 변경한 값이 바로 데이터베이스에 저장되기를 원하는 상황이다. 현재 데이터베이스는 firebase의 realtime base를 사용하고 있었고 value가 변경될 때마다 데이터통신을 하는 것이 부담이 된다고 생각이 들었다. [코드의 일부] import React, { useCallback, useState } from "react"..