반응형 리액트 (React)24 함수형 컴포넌트에서 리덕스 데이터 사용하기 클래스형 컴포넌트에서 connect() 함수를 이용해서 리덕스 스토어와 컴포넌트를 연결했다. 함수형 컴포넌트에서는 useSelector() 훅을 사용해서 store에 접근하여 변수를 가져올 수 있고 useDispatch() 훅을 통하여 직접 action creator들을 dispatch 시킬 수 있다. 클래스형 컴포넌트의 connect와 다른 점은 connect 함수를 사용하는 경우 해당 컨테이너의 부모 컴포넌트가 리렌더링 될 때 해당 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되지만, hook은 그렇지 않기 때문에 React.memo를 사용해서 컴포넌트의 성능 최적화를 해야한다. useSelector() 리덕스 스토어의 데이터(=state를) 조회할 수 있다. 사용하기 위해서는 "r.. 2021. 11. 11. 클래스형 컴포넌트에서 리덕스 데이터 사용하기 클래스형 컴포넌트에서 리덕스 데이터 사용하기 1. 리덕스 모듈과 connect 함수를 불러온다. // 리덕스 스토어와 연결하기 위해 connect 호출 import {connect} from 'react-redux'; // 리덕스 모듈에서 (bucket 모듈에서) 액션 생성 함수 두개를 가져오기 import {loadBucket, createBucket} from './redux/modules/bucket'; connect()는 리덕스 스토어와 컴포넌트를 연결한다. 사용할 때 'react-redux'에서 import해야 하고 컴포넌트를 export할 때 mapStateToProps, mapDispatchToProps 같은 함수를 매개변수로 컴포넌트와 묶는다. 2. 상태값을 가져오는 함수와 액션 생성 함수.. 2021. 9. 3. 리덕스와 컴포넌트 연결 리덕스와 컴포넌트 연결 (index.js) import import { Provider } from 'react-redux'; import store from './redux/configStore.js'; import는 두가지가 필요하다. ReactDOM.render( , document.getElementById('root') ); Provider로 감싸준다. 완성코드 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // 라우터 설정 yarn add react-router-dom import {BrowserRouter} from 'react-router-dom.. 2021. 9. 3. 리액트 리덕스 모듈 생성 (덕스 구조) 덕스(Ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 예를 들어 액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다. 하지만, 덕스 구조는 모양새로 묶는 대신 기능으로 묶어서 작성한다. 예를 들어 같은 기능을 가진 action, actionCreator, reducer을 한 파일에 넣는 것이다. 덕스 구조의 예시는 아래와 같다 // widgets.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMO.. 2021. 9. 3. 리덕스를 통한 리액트 상태관리 흐름도 리덕스를 통한 리액트 상태관리 흐름도 GitHub - SangHun-OH/Sparta-React Contribute to SangHun-OH/Sparta-React development by creating an account on GitHub. github.com - 위의 BucketList Projects 에서 여지껏 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있다. 또한 추가하기 버튼도 App.js에 있다. - 컴포넌트를 만들어 분리하면, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문에 컴포넌트화 시키기 어렵다. - 이와 같은 경우에는, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 사용하면 된.다 - 리덕스는 여러 컴포넌.. 2021. 9. 3. 리액트 리덕스란? (React Redux) 리액트 리덕스란? - 상태관리 라이브러리 - 전역 상태 관리를 도와주는 라이브러리 리액트 리덕스 설치 yarn add redux react-redux 리덕스 공식 홈페이지 Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스의 개념과 용어 리덕스 데이터를 한 곳에 넣고, 여기저기에서 꺼내볼 수 있게 해주는 것. 리액트와 별도로 사용할 수 있다. 상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있다. State - 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. - 딕셔너리 형태({[key]: value})형태로 보관합니다. Action - 상태에 변화가 필요할 때(=.. 2021. 9. 3. 이전 1 2 3 4 다음 반응형
