Ellen's Web Note

yarn add redux react-redux 리덕스 프로젝트 패턴 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하여 사용. - 코드의 재사용성이 높아지고 - UI 또는 이벤트에 따라 특정 컴포넌트에 집중할 수 있다. ● 컨테이너 컴포넌트 (container/CounterContainer.jsx) 리덕스에서 값을 받아오거나 액션을 처리하는 컴포넌트 import React, { useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import Counter from "../compoents/counter/Counter"; import { decrease, increase, setText } from "....

리덕스 개념 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 여러 컴포넌트에서 동일한 상태를 참조할 수 있도록 하는 라이브러리. 기존의 데이터 처리는 부모 컴포넌트에서 업데이트하면서 상태를 관리하고 자식 컴포넌트는 부모 컴포넌트의 데이터를 참조(props)하기 때문에 자식 컴포넌트의 노드가 깊어지면 데이터를 끌고 가야하는 불편함이 있다. 또, 부모 컴포넌트끼리 값을 참조해야 하는 경우 그 위에 또다른 상위 컴포넌트를 생성하여 같은 데이터를 참조할 수 있도록 유도해야 한다. 리덕스를 사용하면, 데이터를 가진 파일을 분리하고 import해서 사용하기 때문에 어느 위치의 컴포넌트라도 동일한 상태의 데이터를 참조할 수 있게 된다. 리덕스 키워드 개념 액션(Action) 데이터에 업데이트가 필요한 경..