React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

💻 redux-saga를 이용한 비동기 액션처리 비동기 액션을 처리하는 라이브러리 리덕스에서 액션 처리후, 비동기 처리를 통해 상태값을 변경시키고 싶을 경우 사용 redux-thunk redux-observable (RxJS 패키지 기반) redux-saga : 제너레이터 기반, 활용도가 높고/ 테스트 코드 작성에 쉬움. 💡 제너레이터 제너레이터는 function*와 같이 작성. function* f1() { console.log('f1-1'); yield 10; console.log('f1-2'); yield 20; console.log('f1-3'); return 'finished'; } const gen = f1(); console.log(gen.next()); /* 실행구간 console.log(..

💻 react-redux 기존에 리액트에서 리덕스 사용 👉 useEffect 훅 & useReducer 훅을 사용하여 상태값을 업데이트 react-redux 👉 useSelector 훅으로 상태값 업데이트 , 자동으로 값 변경시에만 렌더링 가능 App 컴포넌트 Provider에 store를 넘겨 사용 : 액션 처리 시, 이벤트를 받아 하위 컴포넌트가 렌더링 되도록 import React from 'react'; import FriendMain from './friend/container/FriendMain'; import TimelineMain from './timeline/container/TimelineMain'; import { Provider } from 'react-redux'; import s..

💻 리덕스 란? 상태관리 라이브러리입니다. 자세한 내용은 이전 포스팅에서 다뤘기에 생략하겠습니다. https://keeper.tistory.com/27 [우아한 테크러닝 4기] redux 구현해보기 안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux keeper.tistory.com 이 리덕스 사용의 장점은 아래와 같습니다. 컴포넌트 코드로부터 상태관리 코드 분리 미들웨어를 이용한 다양한 기능 추가 - ex) redux-saga - 로컬 스토리지에 데이터 저장 및 불러오기 SSR시 데이터 전달이 간편 리덕스 상태값은 하나의 객체로 표현가능하여, 해당..

💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } import { useState, useEffect } from "react"; export default function Profile({ userId }) { const [user, setUser] = useState(); // 여기서는 ..

💻 추천하는 컴포넌트 파일 작성법 컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다. MyComponent.propTypes = { //... } 💡 컴포넌트에 이름을 붙여주는 것이 디버깅할때 확인이 편함. export default function ({ prop1, prop2 }) {} 👇 export default function MyComponent({ prop1, prop2 }) {} 💡 외부 객체나 변수 같은경우는 가장 밑에 따로 작성 MyComponent.propTypes = { //... } export default function MyComponent({ prop1, prop2 }) {} const DATA = []; function setData(data) { DA..