개발일기

상황 : 투표하기를 여러 번 클릭 시 아직 요청 결과 값을 받지 않았는데, 여러 번 api요청이 되므로 이미 선택했다는 팝업이 뜸해결 : 제일 첫번째 요청만 수행되도록 하는 throttle 처리 💫 debounce와 throttle에 대해 알아보자 debounce, throttle은 자바스크립트 기능이 아닌 프로그래밍 방식이다. 과도한 이벤트 처리 또는 api 요청을 방지하는 기능으로 일정 시간 이후 또는 일정 시간 동안 한번의 작업이 이루어진다.debounce는 사용자 입력이 모두 끝난 후 일정 시간 후에 요청이 일어난다.throttle은 일정 간격 동안 한번의 요청이 일어난다.이런 기능들은 보통 자동 완성이나 스크롤 이벤트 등에서 사용된다.자동 완성에서 debounce를 사용할 경우, 검색어를 쭉..

1. useState를 사용해서 상태관리를 할 때, 객체나 배열의 상태가 업데이트 되는 경우 새로운 변수를 만들고 그 변수에 업데이트 되는 값을 넣은 뒤 그 변수를 상태변화함수에 넣어주도록 한다.숫자나 문자열은 따로 새로운 변수를 만들지 않고, 바뀌는 값을 그대로 넣어도 되는데 왜 객체나 배열은 이렇게 새로운 변수를 만들어 줘야할까? → 리액트는 상태가 변경될 때 컴포넌트의 리렌더링이 결정된다. 상태 객체를 직접 변경하면 리액트가 이전 상태와 새로운 상태를 비교할 때 차이점을 감지하지 못할 수 있다. 왜냐하면 리액트의 상태 비교 알고리즘이 얕은 비교를 수행하기 때문이다. 즉, 객체의 참조가 변경되었는지만 확인한다. 객체의 내부 속성이 변경되어도 참조가 같다면 리액트는 상태가 변경되지 않았다고 판단하고 재..

useMemo 함수 컴포넌트에서 발생하는 연산을 최적화한다. 렌더링할 때 특정 값이 바뀌었을 때만 연산을 실행하고, 그 값이 바뀌지 않는다면 이전에 연산했던 결과를 그대로 사용. 1. 연산 최적화 하고자하는 함수에 useMemo를 붙여 콜백함수로 만들어준다. const getDiaryAnalysis = useMemo( () => { const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.len..

요즘 교육때 들었던 유데미 강의 '한입 크기로 잘라먹는 리액트'를 다시 듣고있다. 오늘 들었던 강의 중 useRef 관련해서 새롭게 알게된 것이 있어 정리해보려고 한다. 강의 내용은 리액트로 다이어리를 만드는 것이고, 현재 useState를 사용하여 data라는 배열에 일기를 추가하는 방식을 사용하고 있다. 최상위컴포넌트인 App 컴포넌트에 일기를 작성할 수 있는 컴포넌트가 있고, 이 작성한 일기들을 하단에 보여주는 컴포넌트가 있다. App 컴포넌트에서는 useState를 사용하여 data라는 배열 상태에 일기를 추가하도록 하고있다. App 컴포넌트는 이렇게 생겼다. function App() { const [data, setData] = useState([]); const dataId = useRef(..

useMutation 서버에 데이터 변경 작업을 요청할 때 사용하며, crud의 create, update, delete에 해당한다. useQuery와 다르게 자동으로 실행되지 않는다. 옵션과 반환값은 useMutation과 크게 차이가 없다. const { mutation } = useMutation(mutationFn , options) 반환값 매개변수 매개변수 1) mutationFn : api 호출 함수 usequery와 마찬가지로 promise 처리가 이루어지는 함수이며 axios를 이용해 서버에 API를 요청하는 부분이다 2) option : 선택사항 - onMutate : 본격적인 Mutation 동작 전에 먼저 동작하는 함수. optimistic update 적용할 때 유용 - optimi..

React-Query 리액트쿼리는 데이터 패칭, 캐싱, 동기화, 서버쪽 데이터 업데이트 등을 쉽게 만들어주는 리액트 라이브러리이다. 처음에는 이 리액트쿼리가 서버를 연결시켜주는 역할인줄 알았으나 리액트 쿼리의 옵션 등을 사용하여 좀 더 편리하게 데이터 관리를 할 수 있는, 말그대로 옵션이었다. 특징 1. queryKey를 사용하여 데이터가 캐싱되고, useEffect로 데이터 상태 관리 및 패칭하던 것을 좀 더 간단하게 구현 가능(페이지네이션, 검색 기능 등). 이것은 sideEffect를 줄이고 코드를 간결하게 작성하도록 한다. 2. 다양한 옵션을 사용하여 복잡하게 코드를 작성해야 하는 것을 간단하게 구현 가능(동기적으로 패칭 및 자동 리패칭 등) 3. isLoading, isFetching, isSu..

회사에서 처음으로 참여한 프로젝트에서 데이터 패칭 라이브러리로 리액트 쿼리를 사용하였다. 처음에는 데이터 패칭 개념조차 이해못했는데, 어찌저찌 하다보니 사용은 하고 있는 중이다... 이 참에 axios와 react-query를 정리해보고자 한다. 이 글에서는 먼저 axios를 정리해보았다. Axios 자바스크립트 어플리케이션에서 서버와 통신할 때(=데이터를 가져올 때) 사용되는 HTTP 비동기 통신 라이브러리이다. 현대 웹 환경에서 서버에서 데이터를 받아오는 일은 이 라이브러리를 기반으로 이루어지고 있다. 자바스크립트에서는 fetch API가 있지만 리액트에서 네트워크 통신은 보통 axios를 사용한다. (fetch와 ajax와 axios의 차이점은...?) 아래의 글을 확인해보자 https://hyri..

NavLink react router에서 지원하는 기능 중 하나로 Link 컴포넌트처럼 페이지 이동이 가능하며 차이점은 특정링크에 스타일을 넣어 줄 수 있다는 것이다. NavLink는 자체적으로 isActive라는 boolean값을 가지고 있는데 활성화시키고싶은 스타일에 css를 설정하고, 활성화(클릭) 될 때 해당 요소에 적용시킬 수 있다. 아래는 NavLink를 이용해 메뉴를 클릭하면 글자 색상이 변경되면서 그 색을 유지하도록 만든 것이다. import React from "react"; import { NavLink } from "react-router-dom"; import "../style/Menu.scss"; const Menu = () => { const activeStyle = { colo..

1. 프로젝트 준비하기 1) typeScript 컴파일러 설치 : 브라우저에서는 ts코드를 인식하지 못하므로 ts를 js로 변환하는 컴파일러를 설치해야한다. $ npm install -g typescript -g : golbal 즉 전역으로 설치한다. 2) 버전확인 $ tsc --version 버전 4.9.4로 설치되었다. 3) react+typeScript 프로젝트 생성 $ npx create-react-app todo-ts --template typescript 리액트 프로젝트 설치 프로젝트 명 --타입스크립트 기반의(옵션) -> 타입스크립트를 제공하는 리액트 프로젝트 생성 **에러 npm ERR! 404 Not Found - GET https://registry.npmjs.org/creat-reac..

Hooks란? 리액트 버전 16.8에 새로 도입된 기능으로 클래스형 컴포넌트를 사용하지 않고 함수형 컴포넌트에서 상태 관리(성능 최적화)를 할 수 있다. - 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다 -> 코드 재사용 가능 1. useState : 상태를 관리해야하는 사항이 있을 때 사용 해당 사항의 관리에 대한 변수와 해당 변수의 값을 변경 할 수 있는 함수가 있다 const [state, setState] = useState(0); (괄호 안에는 state의 초기값) * 여러개의 input값을 변경하기 import React, { useState } from "react"; //input의 값들을 state 객체의 키로 만들어서 묶어준다. const Prac = () => { const [st..