분류 전체보기

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[3]

1. 리덕스 작성 방법 이제 프로젝트에 리덕스를 적용해 볼 시간입니다. 리덕스를 사용하기 위해서는 액션 타입 액션 생성 함수 리듀서 3개의 코드가 필요합니다. 리덕스의 가장 일반적인 구조가 위와 같습니다. 세개의 디렉토리를 만들고 그에 따른 파일을 별도로 만들어주는 방식입니다. 장점 : 코드를 파일 종류에 따라 분리할 수 있고 정리하기에 용이합니다. 단점 : 새로운 액션을 만들 때마다 3개의 파일을 모두 생성해줘야 하고 수정도 3번 해야합니다. 2번쨰는 액션 타입, 액션 생성 함수, 리듀서 3개의 코드를 기능별로 하나에 파일에 작성하는 방법입니다. 이러한 패턴을 Ducks 패턴이라고 부르고 위의 구조에 불편함을 느낀 개발자들이 이러한 방법을 사용합니다. 장점 : 기능별로 하나의 파일만 수정할 수 있고 파..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[2]

1. 할일 목록 컴포넌트 만들기 이번에는 해야 할 일을 추가, 체크, 삭제 할 수 있는 할 일 목록 컴포넌트를 제작할 예정입니다. components 디렉토리에 Todos 컴포넌트를 작성합니다. - components/Todos.js 두 컴포넌트를 선언합니다. Todos, TodoItem 컴포넌트를 분리해도 좋고 하나의 파일에 아래와 같이 작성해도 좋습니다. import React from "react"; const TodoItem = ({ todo, onToggle, onRemove }) => { return ( 예제 파일 삭제 ); }; const Todos = ({ input, //인풋창 입력 테스트 todos, // 할일 목록을 저장 할 객체 onChangeInput, onInsert, onTog..

[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[1]

1. 작업 환경 설정 리엑트 프로젝트를 생성하고, 해당 프로젝트에 리덕스를 적용합니다. 아래와 같이 프로젝트를 추가 생성합니다. yarn create react-app react-redux-tutorial 생성한 프로젝트 디렉토리에 yarn 명령어를 사용하여 redux, react-redux 라이브러리를 설치합니다. cd react-redux-tutorial yarn add redux react-redux 다음과 같이 디렉토리에 prettierrc 파일을 작성합니다. - prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 2. UI 준비..

[프론트엔드] REACT Redux 라이브러리[5]

리덕스 세 가지 규칙 1.단일 스토어 하나의 애플리케이션 안에는 하나의 스토어만 사용 할 수 있습니다. 여러 개의 스토어를 사용하는게 불가능하지는 않지만 업데이트가 빈번하게 일어날 수 있고 상태관리가 복잡해 질 수 있어서 권장하지 않는 사항입니다. 2. 읽기 전용 상태 리덕스 상태는 읽기 전용입니다. 기존의 리엑트에서 setState를 사용하여 state를 업데이트 했습니다. 이 떄 과정에서 불변성을 지키기 위해 spread 연산자를 사용하거나 immer와 같은 불변성 관리 라이브러를 사용했습니다. 리덕스도 이와 동일합니다. 상태를 업데이트 할 떄 객체를 변경하지 않고 새로운 객체를 생성해주어야 합니다. 3. 리듀서는 순수한 함수 변화를 일으키는 리듀서함수는 순수한 함수라는 다음 조건을 만족해야 합니다...