😤 12/21 내배캠 React 36일차

🐜 오늘 할 일

• 심화 강의
• todo-list 유튭 보기 (숙련 과제)
• 후발대 강의

---

📆 계획표

시간	내용	결과
9:00 ~ 15:00	심화강의	⛈
15:00 ~ 19:00	Todo-list 유튭보기
19:00 ~ 21:00	후발대 강의

---

 

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

 

• redux 이해하기
• 1. View 에서 액션이 일어난다.
  2. dispatch 에서 action이 일어나게 된다.
  3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
  4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!)
  5. reducer 의 실행결과 store에 새로운 값을 저장한다.
  6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.
  • 출처 : https://velog.io/@annahyr/리덕스-흐름-이해하기
• Redux 이해 애니메이션
• 원장님 유튭 todo
  • [ ] redux의 전체적인 흐름 파악하기
  • [ ] 디테일은 나중에 !
  • [ ] 기본문법 밑에 “ 더 알아볼 것 “ 잘 메모하고, 확인하기!!!
  더 알아볼 것
  • [ ] config에 대해서
  • [ ] modules의 구성 조금 더 깊게 알아보기
  • [ ] action creator
  • [ ] payload
  • [ ] reducer와 setState의 관계
  • [ ] useSelector
  • [ ] type=submit
  modulesmodule들이 합해져서 store를 이룬다.여기서 반환하는 reducer들을 호출해서 state값을 변경하게 되는데, reduce값을 호출할 때는 dispatch를 이용한다.
• store를 이루는 module들 안에는 여러가지 state를 관리할 수 있는 설정들이 있다.
• modules안에는 reduce를 return 하는 많은 module들이 들어간다.
• 포인트
• 심화강의
• 매니저님 대화우선순위 정하기
• 모르고 이해안되는 부분들은 적어서 튜티님에게 물어보자 무엇을 먼저 공부해야할지!
• 튜터님 대화redux는 state와 props를 store라는 다른 공간에서 관리하고 변경하며 (dispatch이용) 변경시에 useSelector가 변경되는 값을 확인하면 reload하는 것이다. (큰 틀은 어렵지 않으니 디테일한건 구글에 알아보자)
• 멘탈부터 잡아보자.
• 세부적인 디테일을 보기 보단 큰 그림을 먼저 보고 이해하는데에 조금 더 열중하자.
• 후발대내용 : 구조와 로직 위주로 설명, 툴킷, 텅크 설명, redux의 기본 설명
  • Redux 기본
    • [ ] 폴더를 들어가는 순서를 잘 파악해보기
    • [ ] 단발성 state와 전체 state를 구분하는 습관 가지기
    • [ ] reducer
    • [ ] state
    • [ ] store
    • [ ] 수업 후 유튜브 한번 보기(길을 읽으면서)
    • [ ] useSelector : state에 있는 내용을 가지고 오는 문법이다
    • [ ] useDispatch : state의 값을 변경할 수 있는 action을 호출할 수 있는 방법 → useDispatch()함수 이용
    • [ ] link vs navigate
    • [ ] useNavigate
    폴더pages : router가 들어가는 폴더
    • config: reducer를 합쳐서 rootReducer로 만든다 → rootReducer를 가지고 createStore를 만든다 → store라는 객체로 만들어 store를 export한다.
    • configstore.js를 가지고 있다
    • modulesaction : type(어떤 액션을 수행할지 actionItems), payload를 가지고있다actionCreator : 액션 객체를 만들어주는 함수initialState : 처음 state들의 모양을 너무 기니까 그냥 객체로 뺀것
    • actionItems : 만든이유 → 100% 휴먼에러 방지 / 각 컴포넌트에서 import해서 사용한다
    • 형태 { type: "", payload: "", }
    • reducer : state와 그것을 관리하는 방법 (=action)으로 이루어진다
    shared
    • Router.js : react-router-dom에서 명시하고 있는 구조를 가지고 있는 route들의 집합
    redux vs react
  • redux는 state를 관리하는 방법이 달라졌다. 더 간편하게(store를 활용)
  • redux
  • public 폴더의 index.html폴더를 유의깊게 보자 → 어떤 프로젝트든 index.html을 먼저 본다
  • 유의할 것
  • toolkit / thunk
    • toolkitactionCreator,reducer등등 을 하나로 합치는 slice라는 것이 있다Slice : action(호출할 수 있도록 actioncreator를 만들어 주는것), reducer를 만들어 주는 것이다
    • extraReducers : thunk관련된 로직들만 들어간다 = 비동기 로직들만 들어간다.
    • slice가 Reducer를 대체한다고 생각하면 된다
    • : 여러가지 기능을 하나의 키트로 만들어 준것.
    • thunkreducer들이 하지 못하는 비동기 관련된 내용을 수행한다
      • 팬딩 pending 기다리다, 매달리다, 미해결인채로 있다
      • 풀필드 fulfield 끝내다,완료하다, 성공했다
      • 리젝티드 rejected 거절하다
      외부적인 요인들의 문제가 있기 때문에
      • creaAsyncThunk는 createAction의 비동기 버전을 위해 고안됨
      • 액션타입문자열과 프로미스를 반환하는 콜백함수를 인자로 받아서 주어진 액션 타입을 접두어로 사용하는 액션 타입을 생성
    • 기억해야할 것 (계속 체크해야함)
    • reducer 툴킷안에 내장되어 있는 method
    useEffect : 컴포넌트가 실행될때 호출되는 함수
• 컨셉 : 진행했던 수업들을 복습하는 느낌으로 스스로 공부할 수 있을정도의 수준