17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기작은 프로젝트에서는 state만으로 충분하지만, 프로젝트가 커질수록 상태 관리가 복잡해질 수 있다.리덕스를 사용하면 상태 업데이트 로직을 모듈화 하여 컴포넌트와 분리해 관리할 수 있어 유지 보수가 용이하다.여러 컴포넌트가 동일한 상태를 공유해야 할 때 유용하며, 실제로 업데이트가 필요한 컴포넌트만 리렌더링 하는 최적화도 가능하다.      17.1 작업 환경 설정1.  create-react-app > 으로 리액트 프로젝트 생성하기$ yarn create react-app react-redux-tutorial2. 리덕스와 react-redux 라이브러리를 설치react-redux는 리덕스의 상태를 리액트 컴포넌트에 연결하는 라이브러리다. $ cd ..

24-25/React.js 1 2025. 1. 31. 10:01

1. 개념 미리 정리하기리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적인 파일 관리를 가능하게 한다. 리덕스를 사용하면 컴포넌트끼리 똑같은 상태를 공유할 때도 여러 컴포넌트를 거치지 않고 손쉽게 값을 전달하거나 업데이트 할 수 있다. Context API를 사용하는 경우에도 전역 상태 관리가 가능하지만, 리덕스를 사용하면 코드의 유지 보수성 향상으로 작업 효율이 증가하고, 상태를 더 체계적으로 관리할 수 있기 때문에 규모가 큰 프로젝트에 리덕스를 주로 사용한다. 또한, 리덕스는 비동기 작업을 훨씬 효율적으로 관리할 수 있는 미들웨어 등의 개발자 도구도 지원한다. 리덕스 실습에 들어가기 전, 사용할 개념을 미리 정리해보자. 1-..

24-25/React.js 1 2025. 1. 31. 10:00

16장. 리덕스 라이브러리 이해하기 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 컴포넌트의 상태 업데이트와 관련된 로직을 다른 파일로 분리시켜 더욱 효율적인 관리를 가능하게 한다. 또한 리덕스를 사용하면 컴포넌트끼리 동일한 상태를 공유해야 하는 경우에도 여러 컴포넌트를 거치지 않고 상태 값을 쉽게 전달하거나 업데이트 할 수 있다는 장점이 있다. 특히 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 규모가 큰 프로젝트에서는 리덕스를 사용하는 것이 좋다.1. 개념 정리하기리덕스를 이해하기 위해 미리 정리해야 할 개념은 크게 6가지이다.  ① 액션 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생한다. 액션은 하나의 객체로 표현되며, 다음과 같은 형식으로 이루어진..

24-25/React.js 2 2025. 1. 31. 10:00

16장 리덕스 라이브러리 이해하기 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능하다. 코드의 유지 보수성을 높여 주고 작업 효율도 극대화 해준다. 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리할 수 있다. 16.1 개념 미리 정리하기 16.1.1 액션 상태에 변화가 있으면 액션이 발생한 것이다. 액션의 하나의 객체로, 액션 객체로 불린다. 액션 객체는 type 필드를 반드시 가지고 있어야함. 외의 값들은 작성자가 원하면 설정. //액션 객체의 예시 { type: 'TOGGLE_VALUE' data: { id: 1, text: '리덕스 배우기' } } 16.1.2 액션 생성 함수 액션 생성 함수(action creator) : 액..

23-24/React.js 3 2024. 1. 19. 10:00

1. 리덕스 라이브러리 이해하기리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. [액션] 상태에 어떤 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현된다. 액션 객체는 다음과 같은 형식으로 이루어져 있다.{ type: 'TOGGLE_VALUE' }액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣..

23-24/React.js 2 2024. 1. 19. 10:00

16장 리덕스 라이브러리 이해하기 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하나의 객체로 표현되는데요. 액션 객체는 다음과 같은 형식으로 이루어져 있습니다. { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 됩니다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참..

23-24/React.js 1 2024. 1. 19. 10:00

이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 프로젝트의 규모가 커짐에 따라 상태 관리가 복잡해질 수 있습니다. 리덕스를 사용하여 상태 관리를 하면 다음과 같은 장점이 있습니다. 1. 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드를 유지보수 하는데 도움이 됩니다. 2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. 3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다. 이번 실습의 흐름은 다음과 같습니다. 프로젝트 준비 → 프레젠테이셔널 컴포넌트 작성 → 리덕스 관련 코드 작성 → 컨테이너 컴..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:01

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 효과적입니다. 코드의 유지 보수성을 높이고, 작업 효율을 극대화할 수 있습니다. 리덕스는 편리한 개발자 도구를 지원하고 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있습니다. 이전 장에서 배운 Context API로 같은 작업을 할 수 있습니다. 단순히 전역 상태 관리만 요구된다면 Context API를 사용하는 것으로 충분합니다. ..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:00

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 이를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 이외에도 Context API를 통해서 전역 상태를 관리할 수 있지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. I. 개념 미리 정리하기 리덕스를 사용하면서 접하게 될 키워드의 개념이다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이..

22-23/22-23 리액트 스타터 2 2023. 1. 12. 10:00

INDEX 17장 컴포넌트 스타일링 1. 작업 환경 설정 2. UI 준비하기 2.1 카운터 컴포넌트 만들기 2.2 할 일 목록 컴포넌트 만들기 3. 리덕스 관련 코드 작성하기 3.1 counter 모듈 작성하기 3.2 todos 모듈 만들기 3.3 루트 리듀서 만들기 4. 리액트 애플리케이션에 리덕스 적용하기 4.1 스토어 만들기 4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 4.3 Redux DevTools의 설치 및 적용 5. 컨테이너 컴포넌트 만들기 5.1 CounterContainer 만들기 5.2 TodosContainer 만들기 6. 리덕스 더 편하게 사용하기 6.1 redux-actions 6.2 immer 7. Hooks를 사용하여 컨테이너 컴포넌트 만들기 7.1 u..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:01

INDEX 16장 리덕스 라이브러리 이해하기 1.개념 미리 정리하기 1.1 액션 1.2 액션 생성 함수 1.3 리듀서 1.4 스토어 1.5 디스패치 1.6 구독 2. 리액트 없이 쓰는 리덕스 2.1 Parcel로 프로젝트 만들기 2.2 간단한 UI 구성하기 2.3 DOM 레퍼런스 만들기 2.4 액션 타입과 액션 생성 함수 정의 2.5 초깃값 설정 2.6 리듀서 함수 정의 2.7 스토어 만들기 2.8 render 함수 만들기 2.9 구독하기 2.10 액션 발생시키기 3. 리덕스의 세 가지 규칙 3.1 단일 스토어 3.2 읽기 전용 상태 3.3 리듀서는 순수한 함수 4. Question 개념 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 리덕스를 왜 사용하는가? 컴포넌트의 상태 업데이트 관련 로직을 다른 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 31. 13:00

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05