본문 바로가기

📚 FrontEnd -Study/Redux3

[Cmarket Redux] 오늘은 이전에 react로 작업한 cmarket을 redux를 사용하여 진행해보았다. 이전에는 Props Drilling 으로 인하여 굳이 해당 데이터가 필요 없는 곳까지 컴포넌트를 거치고 거쳐 데이터를 전달해주곤 했다. props로 넘겨주는 동작흐름을 정리해보았다. Item을 클릭하면 CartItem에 담겨야 한다. 이 두 컴포넌트가 데이터를 공유하기 위해서는 공통 부모에 상태를 위치시키고, Item을 App에서 내려주고 내려주는 그런 흐름을 가지고 있다. 하지만 Redux를 사용해서 전역으로 상태를 관리하고 필요한 곳에서 꺼내 쓸 수 있다! 먼저, 파일의 구성은 이렇다. 이전 Redux 관련 내용에 적은 것 처럼 각각의 용도별로 파일이 구분되어있다. 처음에 바로 코드를 작성하려다 보니 흐름이 이해가 .. 2023. 4. 25.

[Redux 실습] 오늘 리덕스를 처음 배우는데 무슨 말인지 잘 이해가 안 간다..! 내일 리덕스를 활용하여 과제를 해야 하기 때문에 공부하는 과정을 블로깅을 통해 더 꼼꼼하게 기록해보려 한다. 1. 카운터 위의 사진에 보이는 것처럼 + 버튼을 누르면 숫자가 1을 더한 값이, - 버튼을 누르면 1을 뺀 값을 화면에 출력하는 실습을 해보자! index.js import { legacy_createStore as createStore } from 'redux'; const counterReducer = (state = count, action) => { switch (action.type) { case 'INCREASE': return state + 1; case 'DECREASE': return state - 1; case .. 2023. 4. 25.

[Redux] Redux란? Redux는 애플리케이션의 상태를 전역으로 관리하는 데 사용되는 오픈소스 JavaScript 라이브러리이다. React와 함께 사용되기도 하지만, 다른 라이브러리나 프레임워크와도 사용할 수 있다. 1. 등장 배경 Redux가 도입되기 전에는 MVC 패턴 형식(소프트웨어 디자인 패턴)으로 state가 사용되었다. Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조로 양방향 데이터 흐름을 가졌는데 이러한 양방향은 데이터 흐름을 복잡하고 데이터 흐름을 판단하기 힘든 구조여서 단방향 데이터 흐름이 생겼고 그게 바로 Redux이다. 상태가 변경되어야 하는 이벤트 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다. Action객체는 Dispatch .. 2023. 4. 24.

이전 1 다음

728x90

티스토리툴바