개발일지/React31 [30] React와 Redux를 활용한 비동기 작업 관리 React와 Redux를 활용한 비동기 작업 관리는 Redux Toolkit과 함께 사용하면 더욱 간편해집니다. 비동기 작업 관리의 핵심은 데이터를 비동기적으로 가져오는 작업(API 호출 등)을 관리하고, 이를 Redux 상태로 통합하여 React 컴포넌트에 전달하는 것입니다. 1. 비동기 작업 관리의 기본 원리React와 Redux에서 비동기 작업이 필요한 이유외부 API 호출: REST API나 GraphQL을 통해 데이터를 가져오거나 전송할 때데이터 상태 관리: 로딩 상태, 성공 여부, 에러 상태를 Redux 상태로 관리컴포넌트 간 상태 공유: 비동기 데이터를 여러 컴포넌트에서 재사용 Redux에서 비동기 작업의 문제Redux 자체는 동기 상태 관리를 위한 도구이므로, 비동기 작업을 직접적으로 처리.. 2025. 1. 10. [29] 리덕스 ver.자세한 설명 Redux에 대하여https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux자바스크립트 앱을 위한 예측 가능한 상태 컨테이너.ko.redux.js.org 1. Redux자바스크립트 앱을 위한 예측 가능한 상태 컨테이너data의 흐름을 일방향화하여 산재되어 있는 구조와 흐름을 정리해주고, 이에 따른 코드의 유지보수와 무결성을 높여주는 도구일관적으로 동작하고, 서로 다른 환경에서 작동하며, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.Redux는 React와 다른 라이브러리지만, 함께 사용할 수 있습니다.애플리케이션의 모든 상태를 하나의 중앙 저장소(store)에서 관리하는 것이 특징입니다. 2. Redux의 핵심 개념(1) Store애플리케이.. 2025. 1. 8. [28] 리덕스 ver.간단 설명 리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 입니다.리덕스를 사용하면 훨씬 코드가 깔끔해집니다. 리덕스를 이용하면 한 곳에 관리를 합니다. 로직이 깔끔해지고 어떤 것을 구현할 때 쉬워집니다. 리덕스의 흐름?-> 한 방향으로만 흐릅니다. 그림을 간단히 설명하자면, 어떤 사람이 입금(deposit), 출금(withdraw)을 할 수 있다고 가정해보겠습니다.처음에는 0달러인데, 10달러를 입금한다고 했을 때, 0달러라는 데이터를 10달러로 업데이트한 뒤에 10달러가 업데이트 되면 화면에 나타나게 해줍니다. store에 있는 0달러를 10달러로 변경한 다음, 변경된 값을 구독하는 컴포넌트들은 리 렌더링 되게 됩니다. 정리하자면,Action- Action은 간단한 JavaScript 객체입니다.. 2025. 1. 7. [27] Typescript Type 추가 타입 2024. 12. 21. [26] TypeScript란? https://www.tutorialspoint.com/typescript/typescript_overview.htm TypeScript - OverviewTypeScript - Overview - JavaScript was introduced as a language for the client side. The development of Node.js has marked JavaScript as an emerging server-side technology too. However, as JavaScript code grows, it tends to get messier, making it difficultwww.tutorialspoint.com 2024. 12. 21. [25] Data Fetching 데이터를 가져올 때, getStaticProps, getStaticPaths, getServrSideProps 3가지를 이용한다. 1. getStaticProps 2. getStaticPaths params와 fallback 3. getServerSideProps SSG란? 2024. 12. 21. 이전 1 2 3 4 ··· 6 다음
