redux4 Redux, Redux toolkit, Redux thunk Redux, Redux toolkit, Redux thunk란?Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 도구이다. Redux Toolkit은 Redux의 사용을 보다 쉽고 간편하게 만들어주는 공식적인 Redux 라이브러리이다. Redux Thunk는 Redux 미들웨어의 한 종류로 Redux Thunk를 사용하면 Redux 액션 생성자 함수에서 비동기 작업을 처리할 수 있다. 즉 Redux는 상태관리도구이며, Redux Toolkit은 Redux의 사용을 쉽게 해주는 라이브러리., Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어이다. Redux를 사용한 예시// 액션 타입 정의const INCREMENT = 'INCREMENT';const DEC.. 2024. 5. 16. 상태관리란(ContextAPI,Redux)? 상태관리란?쉽게 말해서 상태 즉 데이터를 관리하는 방법 상태(state)란?웹페이지 내에서 눈이 보이는 데이터 + 서버와 주고 받는 데이터(눈에 보이지 않는 데이터) 모두. 리액트의 ‘상태’ ⇒ 컴포넌트의 변경 가능한 동적인 데이터 리액트 어플리케이션은 여러개의 컴포넌트들을 사용해서 만들어짐 쉬운예시) -> 각각의 컴포넌트안에는 "기억"해야하는 동적인 데이터(ex.현재Input값,이미지 등)인 상태가 있음. 이 상태를 사용하여 자신의 모양이나 동작을 바꿀 수 있다. 상태관리가 필요한 이유?⇒ 어플리케이션, 프로젝트가 커짐으로써, 컴포넌트들 간 공유하는 상태의 관리가 어려워짐.⇒ 어떠한 작용으로 인해서 상태 변화가 나타날때, 상태가 "언제, 어떻게, 왜" 변화하였는지 알 수 없어 제어하기 힘들다. 상태관.. 2024. 5. 16. React Query React Query란? 상태관리 라이브러리 중 하나. 리액트 앱 내에서 데이터 패칭, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어준다. 사용하는 이유 구글링을 통해 react-query를 사용하는 이유에 대해서 찾아보니 간단하게 다음과 같은 이유가 있었다. 서버 쪽 데이터들을 좀 더 쉽게 관리하기 위해 ⇒ 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와줌 클라이언트 상태와 서버 상태를 명확히 구분하기 위해. 그 중 서버 쪽 데이터를 좀 더 쉽게 관리하기 위해서 사용해보았다. 기존에 redux를 사용했을때는 데이터를 가져오기 위해 axios를 따로 불러오고 그걸 또 변수에 담고 했는데 react-query의 경우 axios 통신 보낼 api만 간단하게 설정해놓았을때.. 2024. 1. 22. 상태관리 도입해서 전역 변수 관리하기(Redux, React Query) 상태 관리를 도입했다. 프로젝트가 계속 진행되면서 전역적으로 사용해야하는 변수들이 생겨났기 때문이다. 예를 들어 로그인 유무를 알 수 있는 isLogin과 같은 변수는 전역적으로 관리하여 로그인 상태일때는 home이나 다른 페이지를 보여주고 로그인을 해야하는 상태에는 Auth 화면을 보여준다. 상태관리는 redux, react- query 2개를 사용했다. 처음에는 redux를 사용했다가 다양한 기능과 백엔드 시스템과의 연동을 쉽게 구현할 수 있는 react-query를 도입하여 사용해보았다. 이번 글에서는 리덕스 기본 흐름과 도입 과정, 실제 코드에 대해서 작성해볼려고 한다. 리덕스 도입 리덕스 기본 흐름 특정한 액션이 유발(dispatch)되면 / 이에 대응하는 reducer가 변화한 상태 state.. 2024. 1. 21. 이전 1 다음
