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

요즘 JS사용에서 TS로 추세가 넘어가고 있다더라고요. 특히 리액트와 타입스크립트 조합이 매우 유용하다해서 저도 공부를 시작했습니다! 타입스크립트 언어의 기본 사용법과 문법은 자바스크립트와 동일 💡 왜 타입스크립트를 사용하나요? 동적인 자바스크립트를 정적으로 → 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다. 디버깅의 편의 : 에러 메시지가 구체적이고 자세하게 나온다. 이러한 이유로, 현재 TS를 사용하는 추세가 이어지고 있다고 합니다. React + TS react+ts는 기존 리액트와 구조는 동일합니다. 여기서 state, props, function, event 등에 타입을 선언해준다는 점이 기존 리액트와의 차이점입니다. 각각 리액트에서 어떻게 사용되는지 설명해보겠습니다. State 우선 리액트..

💻 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 이 리덕스 사용의 장점은 아래와 같습니다. 컴포넌트 코드로부터 상태관리 코드 분리 미들웨어를 이용한 다양한 기능 추가 - redux-saga - 로컬 스토리지에 데이터 저장 및 불러오기 SSR시 데이터 전달이 간편 리덕스 상태값은 하나의 객체로 표현가능하여, 해당 객체만..

💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } 💡 마운트 시점에만 실행되기 원한 다면 별도의 훅으로 사용하면 더 직관적이라는 장점이 있습니다. function Profile({ userId }) { const [user, setUser] = useState(); useOnMounted((..

📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 if문 for문 등에 넣어 조건적으로 호출되면 안 됩니다. 👉 if 문 return 뒤에 사용도 마찬가지입니다. 💡 함수형 컴포넌트나 커스텀 훅에서만 호출 가능 📍 Context API 속성 값을 하위 컴포넌트로 넘겨 사용할 경우, 컴포넌트 트리가 깊다면 속성값을 여러 컴포넌트에 걸쳐 넘겨줘야 하는 불편함이 있습니다. 이를 해결할 수 있는 방법으로 context API가 있습니다. import React, {useContext, createContext } from 'react'; const UserContext = createContext('unknown'); export default function App() { return ( 상단 메뉴 하단 메뉴..