본문 바로가기

IT관련/Redux 관련

IT관련/Redux 관련 2022. 6. 29.
한눈에 ! 누구나 쉽게 ! useDispatch와useSelector에 대해서 알아보자 ! (react toolkit를 활용한 state관리 ! ) 안녕하세요 ! 전체적인 흐름 : https://heokknkn.tistory.com/21 저번에 ~ Redux의 관해서 대해서 공부를 해봤는데요 ! 이번엔 여기서 react-redux에 기능중 ! useSelector과 useDispatch에 대해서 집중적으로 알아보려고 합니다 !!! 쉽게쉽게 풀어나가겠습니다 ! 아 ! 저는 Next JS에서 진행합니다 !! ( 리액트 환경에서 무난하게 돌아가니 너무 걱정마세요 ! ) useSelector이란? https://react-redux.js.org/api/hooks 공식문서를 보면 ! useSelector를 사용하면 Redux의 store state에 데이터를 등록할 수 있습니다. 즉 ! 등록 한 데이터를 가져와서 쓸 수 있다로 생각해주시면 편합니다 !!! 그..
IT관련/Redux 관련 2022. 4. 4.
Redux Toolkit에 대해서 깊게 알아볼까요? (configureStore, combineReducers, createSlice) 안녕하세요 ! 전체적인 흐름 : https://heokknkn.tistory.com/21 저번에 ~ Redux의 관해서 대해서 공부를 해봤는데요 ! 이번엔 그 중에서 configureStore와 configureStore란? ・Reducer에서 반환된 새로운 state를 Store라는 객체로 정리해 관리하는곳입니다 ・Store는 Redux Toolkit configureStore에 객체 형식으로 reducer를 전달하여 만들 수 있습니다. ・또한 기존에 createStore비슷하지만 ! 여기서 주의할 점은 {reducer: rootReducer} 로 만들어 주어서 넣어야합니다 ! (property의 명이 반드시 reducer !! 그리고 createStore와 달리 ! Thunk, dev tool까지 자..
IT관련/Redux 관련 2022. 3. 15.
Redux Toolkit을 이용해서 상태관리를 더 잘 사용해보자 ! 한눈에 리덕스를 이해하고 누구나 사용가능하게 ! 이론 : https://heokknkn.tistory.com/20 안녕하세요 ! 이번엔 저번 이론에 이어서 바로 실습과 사용을 왜 하면 좋은지에 대해서 바로바로 실습에 들어가겠습니다 ! 저번에 밑에와 같은 그림이 기억나시나요? 이것을 보면서 바로 들어가보겠습니다 !! Store생성 먼저 ! 상태들을 총 관리하는 Store부터 생성해봅시다 ! # NPM npm install @reduxjs/toolkit or # Yarn yarn add @reduxjs/toolkit 당연히 설치를 먼저해주세요 !! 밑에 그림처럼 그런다음에 먼저 createStore를 만들어주세요 !!! 또한 configureStore에 대하여 /* eslint-disable react-hooks/rules-of-hooks */ impor..
IT관련/Redux 관련 2022. 3. 15.
Redux(상태관리)을 알아보면서 상태관리를 더 쉽게 사용하는 방법을 알아봅시다 안녕하세요 !!! 이번엔 상태관리에 대해서 손쉽게 사용하는 방법을 알아가려고 합니다 !!! 제가 회사에서 배우면서 저만의 느낌으로 좀 더 쉽게 이해하려고 한 부분들을 소개하려고 합니다 !!! ( 본문이 좀 길게 되는경우 파트를 나누겠습니다 ! ) 먼저 Redux에 대해서 알아봅시다 ! Redux란? Redux란 2015년에 Dan Abramov씨와 Andrew Clark씨에 의해 작성된 상태 관리 라이브러리입니다! Flux 아키텍처 의 영향을 받아 프론트 엔드에서의 데이터 관리를 쉽고 견고하게 해줍니다 ! Redux 자체는 순수한 JS로 쓰여 있기 때문에 Vanila JS나 jQuery에서 사용할 수 있는 것은 물론이지만 단방향 데이터 바인딩을 하고 있는 React랑 가장 궁합이 좋습니다 ! Flux란?..
728x90

티스토리툴바