JavaScript (46) 썸네일형 리스트형 Redux - 고급 사용법 목차 비동기 Action 리덕스 미들웨어 redux-devtools redux-thunk redux-promise-middleware Ducks 패턴 redux-saga 1. 비동기 Action 비동기 API를 호출할 때, 호출을 시작하고 응답을 받았을 때, 앱에서 두 순간 모두 상태 변화를 요구한다면, 리듀서에 각각 다른 액션을 보내야 할 것입니다. 예를 들어, 아래와 같이 말이죠. export const GET_USERS_START = "GET_USERS_START"; export const GET_USERS_SUCCESS = "GET_USERS_SUCCESS"; export const GET_USERS_FAILED = "GET_USERS_FAILED"; // 비동기 API 호출이 시작됨을 알리는 .. Redux - react-redux 1. react-redux? 리액트 노드 패키지로써, 리액트에 리덕스를 좀 더 사용하기 편리하도록 만든 라이브러리입니다. 기존 리덕스와 마찬가지로, 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어의 과정을 통해 상태를 변경합니다. 차이점은 connect라는 함수가 사용된다는 점입니다. 2. 기본 사용법 아래 예제는 간단히 추가 버튼을 누르면, TodoList에 값이 추가되어 보여지는 앱을 만드는 예제입니다. 먼저, react-redux를 설치합니다. $ npm i react-redux connect 함수를 사용해 TodoList 컴포넌트를 생성합니다. import { connect } from 'react-redux'; function TodoList({ todos }) { return ( {todo.. Redux - 사용해보기 리덕스의 기본적인 내용은 아래 글을 참고해 주세요. https://sty110357.tistory.com/78 ---- 1. 기본적인 사용법 리덕스의 구성요소인 Actions, Reducer, Store를 생성하고 State를 변경해 봅니다. Redux 설치 npx create-react-app redux-test && cd redux-test npm i redux Action Creator 생성 /* actions.js */ // 액션 타입 문자열의 오타 실수를 방지하기 위해 상수로 선언 export const ADD_TODO = "ADD_TODO"; // 액션 생성자 함수 선언 export default function addTodo(todo) { return { type: ADD_TODO, todo.. Redux - Basic 이 글은 아래 포스팅을 번역한 글입니다. https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/ ---- 목차 Redux Redux를 언제 사용해야 할까 Redux가 필요한 이유 Redux의 동작 방식 Actions Reducer Store Middleware 결론 1. Redux 리덕스는 JavaScript 앱이 일관성 있고, 테스트하기 쉽도록 돕는 예측 가능한 상태 컨테이너입니다. 리액트에선 대부분 상태 관리 도구로 사용되고 있고, 다른 JavaScript 프레임워크나 라이브러리에서도 사용할 수 있습니다. 리덕스를 사용하면 앱의 상태를 스토어에 저장하고, 각 컴포넌트들이 스토어에 저장된 상태에 접근할 수 있습니.. React - useMemo vs. useCallback 이 글은 아래 포스트를 보고 작성했습니다. https://www.daleseo.com/react-hooks-use-memo/ https://www.daleseo.com/react-hooks-use-callback/ ---- React 16.8 버전에 새로 추가된 Hook인 useMemo와 useCallback에 대해 알아보려 합니다. 1. useMemo Memoization된 값을 반환하는 Hook입니다. 즉, Re-Render가 발생했을 때 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각할 수 있습니다. Memoization? 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거해 실행 속도를 개선하는 기법 아래와 같이 입력받은 str.. React - 배포하기 리액트에는 기본적으로 개발에 유용한 경고가 많이 포함되어 있습니다. 하지만, 그 경고는 리액트를 더 크고 느리게 만들기 때문에 앱을 배포할 때에는 프로덕션 버전을 사용해야 합니다. 빌드 프로세스가 올바르게 설정되었는지 잘 모르는 경우엔, 크롬의 확장 프로그램인 React Developer Tools를 사용하여 확인할 수 있습니다. 목차 SPA 프로젝트 빌드 serve 패키지로 배포하기 AWS S3에 배포하기 NginX로 배포하기 Node.js의 Express로 배포하기 1. SPA 프로젝트 빌드 프로젝트 생성 npx create-react-app react-deploy-test cd react-deploy-test npm run build npm run build : 리액트 애플리케이션을 producti.. React - Hooks, Context React Hook이 나오기 전에는 state와 Life Cycle을 사용하기 위해서 컴포넌트를 Class로 만들어야 했습니다. 하지만, Class로 컴포넌트를 만들다 보니 로직이 복잡해지고, 가독성이 떨어져서 컴포넌트를 재사용하기가 어려웠습니다. 추후에 함수 컴포넌트에서도 state와 Life Cycle을 사용할 수 있는 Hook이 출시됐고, 컴포넌트의 로직과 가독성이 향상되어 재사용하기가 수월해졌습니다. ---- 1. Hooks React 16.8 버전에 새로 추가된 기능이며, 클래스 컴포넌트에서만 state와 Life Cycle을 사용할 수 있던 걸, 함수 컴포넌트에서도 사용할 수 있게 해줍니다. 단순히 state와 Life Cycle을 사용할 수 있다는 점을 넘어서, 컴포넌트의 state와 관련된.. React - ControlledComponent, UnControlledComponent 1. 왜 Controlled, UnControlled를 알아야 할까? React는 컴포넌트가 상태(state)를 가지게 해서 각 컴포넌트가 독립적으로 동작하도록, 단일 소스로 관리하려는 설계 원칙을 가지고 있습니다. 또한, props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 단방향 흐름을 지향합니다. 위와 같은 원칙들은 와 같이 데이터를 가지지 않는 엘리먼트를 사용할 땐 문제가 되지 않습니다. 하지만, . , 와 같이 자체적으로 value를 가지는 엘리먼트에 접근하려면 document.querySelector를 사용하게 되고, 위의 원칙들을 위배하게 됩니다. https://soldonii.tistory.com/145 React의 설계 원칙에 맞게 접근하기 위해 사용되는 방법으로 Cont.. 이전 1 2 3 4 5 6 다음 목록 더보기