전체 글
잘못된 내용이나 부족한 부분 지적 감사히 받겠습니다.
Redux-Saga
전체 소스코드는 여기에서 확인해볼 수 있습니다. 개요 Redux-Saga의 Github에서는 아래와 같이 설명하고 있다. Redux-Saga는, 애플리케이션 부작용(예: 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 순수하지 않은 작업)을 보다 쉽게 관리하고, 보다 효율적으로 실행하고, 테스트하기 쉽고, 오류를 더 잘 처리하도록 만드는 것을 목표로 하는 라이브러리입니다. 그래서 언제 쓰나? 사실 Redux-Saga는 도입한다고 드라마틱하게 뭔가가 바뀌지는 않는다. 다만, 사용자 환경에 있어서 조금 더 좋은 환경을 제공해줄 뿐이지. 그 더 좋은 환경은 뭘까? API 호출 등의 비동기 작업에서 사용자 부주의로 인한 세부적 컨트롤이 가능하다. Async / Await으로 처리하는 것이..
Redux 적용하기 (Typescript)
전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ 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..
[React.tsx] 'never'형식에 '...'속성이 없습니다 (Typescript Never Type)
생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다. never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. -- Typescript 가이드북 나는 React + Redux를 적용하는 도중 문제를 직면했다. 타입 지정 export interface UserSearchList { characterId: string; characterName: string; jobGrowId: string; jobGrowName: string; jobId: string; jobName: string; level: ..
Hooks
Hooks는 React v16.8 이후 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 기능을 가능하게 해 준다. useState 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 도와준다. 다음은 버튼을 클릭해 Count를 올리고 내리는 컴포넌트다. import { useState } from 'react'; const Test = () => { const [count, setCount] = useState(0); // 비구조화 할당 return ( Count value = {count} setCount(count + 1)}> +1 setCount(count - 1)}> -1 ); }; export default Test; useReducer useState보다 더 다양한 컴포넌트 상황에 ..