전체 소스코드는 여기에서 확인해볼 수 있습니다. 개요 Redux-Saga의 Github에서는 아래와 같이 설명하고 있다. Redux-Saga는, 애플리케이션 부작용(예: 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 순수하지 않은 작업)을 보다 쉽게 관리하고, 보다 효율적으로 실행하고, 테스트하기 쉽고, 오류를 더 잘 처리하도록 만드는 것을 목표로 하는 라이브러리입니다. 그래서 언제 쓰나? 사실 Redux-Saga는 도입한다고 드라마틱하게 뭔가가 바뀌지는 않는다. 다만, 사용자 환경에 있어서 조금 더 좋은 환경을 제공해줄 뿐이지. 그 더 좋은 환경은 뭘까? API 호출 등의 비동기 작업에서 사용자 부주의로 인한 세부적 컨트롤이 가능하다. Async / Await으로 처리하는 것이..
전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ npx create-react-app redux-test --template typescript # Typescript는 옵션입니다. Redux 설치 $ npm i redux react-redux // package.json { "name": "redux-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/nod..
생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다. never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. -- Typescript 가이드북 나는 React + Redux를 적용하는 도중 문제를 직면했다. 타입 지정 export interface UserSearchList { characterId: string; characterName: string; jobGrowId: string; jobGrowName: string; jobId: string; jobName: string; level: ..
Redux는 해도해도 헷갈리는 느낌이기에, 한 번 정리해보려 글을 작성한다. React에서 이야기하는 상태는 무엇을 의미할까? React에서 사용되는 상태(State)란, 컴포넌트 내 존재하는 변수를 의미한다. React는 Vue나, Angular와 다르게 데이터가 한 방향으로 흐르는 단방향 바인딩 방식인데, 이는 Props drilling을 발생시킨다고 한다. Prop Drilling이란, '리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정' 이라고 하는데, 쉽게 풀이해보자면 React 내에서 상탯값을 전달하기 위해 하위 컴포넌트를 계속 타고 가는 과정이라고 생각하면 된다고 한다. 결국, 상태 관리 라이브러리는 이러한 Props drilling을 방지하기 위해 사용한다고 보면 된다. 상태..
