개발블로그

api요청을 한 후 새롭게 적용된 데이터를 보여줘야할 때, 우리가 생각하는 것보다 늦게 데이터가 반영된다.이를 해결하기 위해 api 요청을 하면서 ui를 미리 반영하는 낙관적 업데이트라는 것을 한다. 대표적인 예로 좋아요 클릭 시 하트 색 또는 좋아요 개수를 변경시키는 것이 있다. (gif가 좀 이상하게 잘려서 아다리가 안맞음 ㅠ;) 이렇게 좋아요를 클릭해도 숫자가 늦게 반영이 되는 상황에서 낙관적 업데이트를 사용하면 좋아요를 클릭 시 개수를 바로 반영시킬 수 있다. 낙관적 업데이트 방법(두둥) 일단 나는 react-query를 사용하고 있고, 좋아요 클릭 시 post 요청을 보내고 있다. 1. useMutate의 onMutate에서 변경하고자 하는 쿼리를 queryClient.cancelQueries..

React-hook-form에 대해서는 input 입력 시 렌더링을 최소화하는 라이브러리 정도로만 알고 있었다. 현 회사에 입사해서 계속 리액트 훅 폼을 사용하고 있는데, 기계적으로 붙여넣기(..)만 하다가 제대로 공부해야겠다는 생각이 들어 작성하는 리액트 훅 폼 정리 글이다. 1. 제어 컴포넌트 vs 비제어 컴포넌트제어/비제어 컴포넌트는 리액트가 실시간으로 state를 제어할 수 있는지 없는지에 따라 나눠진다. 제어 컴포넌트를 사용하게 되면 과도한 리렌더링이 발생하게 되는데 이러한 특성을 보완하기 위해 비제어 컴포넌트인 리액트 훅 폼 라이브러리를 사용하기 시작했다. 🔗 제어 컴포넌트기존 리액트에서 input창에 입력을 하면 onChange함수에 state 변경 함수를 연결하여 실시간으로 상태 변화가..

🐞 문제상황리스트 정렬 변경 시 변경된 리스트가 바로 적용되는 것이 아니라 변경 탭을 한번 더 클릭하면(modalVisible 상태가 변경되면) 그때 리스트가 변경된다💡해결과정기존 코드 const [modalVisible, setModalVisible] = useState(false); // 모달보기 const [order, setOrder] = useState('time'); // 정렬방법 useEffect(() => { if (pickList) { let sortedList; if (order === 'time') { // 최신순 sortedList = pickList.sort( (a, b) => new Date(b.CREA..

상황 : 투표하기를 여러 번 클릭 시 아직 요청 결과 값을 받지 않았는데, 여러 번 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, isSucce..

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