[항해99 18일차] 2022.03.24 TIL /리덕스

< 오늘 할 일 > 

1. 리덕스 강의 다시 듣기

2. 스피너 수정하기

3. 팀노션 Q & A 준비하기

4. 자바스크립트 코딩앙마 강의 듣고 (Math다음부터) 깃허브 TIL 에 정리해두기

 

음 우선 내가 뭘 못하는지 이제서야 슬슬 감이 오기 시작한다.

난 자바스크립트를 잘 모른다. 그래서 코드를 작성하지 못하는 단계이다.

보고 이해하고, 그대로 사용하는 것은 가능한데 봐도 모르는 코드들이 아직은 많은 단계이다.

 

지금 내가 해야될 것은 리액트의 전반적인 흐름을 이해하고,

어떻게 데이터를 가지고 쓸 수 있는지.. 큰 틀을 이해한 다음

차근 차근 개인과제를 하면서 그때 그때마다 자바스크립트 문법을 공부하고, 

리액트의 전반적인 흐름을 이해했다면 써먹을 수 있는 단계로 나아가야된다.

 

아직 cs기초 지식도 없고, 전형적인 문과생 머리지만 ...해보려고한다.

 

❗️다시 정리해보는 리덕스❗️

리덕스 : 전역 상태 저장소 (별도로 있는 데이터)

이 데이터를 App 이 가져다 쓰고, 자식들도 가져다 쓰는 것. 부모의 state를 간섭하는 것이 아니라서 유용하게 쓰인다.

 

props drilling 아래로 전달해주기 위해 쓸데없는 데이터를 가지고 있는 것.

리덕스는 이 props drilling을 해결해준다.

 

❗️상태관리흐름 꼭 기억해야 되는 것❗️

1. 전역으로 관리 해야 할 데이터 저장소가 있다. (즉 , 전역으로 누구나 볼 수 있는 어떤 값이 저장되어 있을거다.)

2. 그 데이터를 참조하는 애들이 있을 것이다. (데이터를 보고 싶어하는 애들이 있다.)

👉 누군가는 이 데이터를(이 값을) 수정하고 싶을 것이다.

3. 바뀐 값을 모두가 볼 수 있게 해줘야 된다.

 

리덕스를 사용할 때는, 모양새대로 사용한다.

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 REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}

// Action Creators
export function loadWidgets() {
return { type: LOAD };
}

export function createWidget(widget) {
return { type: CREATE, widget };
}

export function updateWidget(widget) {
return { type: UPDATE, widget };
}

export function removeWidget(widget) {
return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

> src > redux > modules > bucket.js 

리덕스 파일안에 모듈즈 파일 안에 덕스구조를 넣을 하나의 기능 js파일에 위의 내용을 넣어주면 된다 !!

그리고 리덕스 파일 안에 스토어 js파일을 만들어주면된다.

store는 reducer를 뭉친 것!! rootReducer이라고 한다 !

이 루트리듀서를 createStore안에 넣어주어서 store을 만들어 줬다.

 

이렇게 만든 store를 컴포넌트에 주입하고 싶을 땐

index.js로 돌아가서 아래 내용을 덮어씌워준다 ~!

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import {Provider} from "react-redux";//이것을 추가해줍니다.
import store from "./redux/configStore" //이것을 추가해줍니다.

ReactDOM.render(
  <Provider store={store}> //이것을 추가해줍니다.
    <BrowserRouter>
    <App />
  </BrowserRouter>
  </Provider>,
  document.getElementById("root")//이것을 추가해줍니다.
);

리덕스에도 훅이 있다.

useSelector : 데이터를 가지고 오는 훅

useDispatch : 데이터를 업데이트하는 훅

 

위에 있는 것들을 각 컴포넌트에서 임포트 하면 된다!

이런식으로!!!

import {useSelector, useDispatch} from "react-redux";

const data = useSelector((state)=> state);
// data는 스토어가 가지고 있는 전체 데이터가 되는 것이다 !

import {useDispatch} from "react-redux";
import {createBucket} from "./redux/modules/bucket"

const dispatch = useDispatch();

dispatch(createBucket(text.current.value));

오늘은 여기까지 !! 내일 더 열심히 공부해야지 ~!

아 그리고 팀으로 노션에 입문주차에 알아야 될 것 몇가지를 정리해두었다.

팀노션 링크 👈click 🤩

 

우선 다 정리해서 과제제출 완료다 ~~~

이번주차는 개인과제여서 팀으로 소통할 기회가 많이 없어서 아쉬웠당.😞

그래도 꾸준히 TIL을 쓰시는 좋은분과 많은 소통을 해서 이번에도 좋았다. ㅎ헤헤헤 

리덕스를 오늘 다시 공부해보았는데,

이전에 강의 봤을때는 이해가지 않던 것들이 슬슬 눈에 들어오기 시작했다.

자바스크립트 문법만 더 알면 되겠다 !

병행하여 공부하자 !!!!!