Achievement goals

• Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
• Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

• Presentational 컴포넌트와 Container 컴포넌트

데이터를 다루는 부분(Container)과 화면을 표현하는 부분(Presentational)으로 나눠서 개발
React 에서 Component 를 Presentational Component 와 Container Component 로 나누는 것은 재사용성과 유지보수성을 높이기 위함

Presentational 컴포넌트

• DOM 마크업과 스타일 담당
• 데이터 처리 능력 없음
• Redux와 관련 없음
• 부모 컴포넌트로부터 받은 props인 데이터와 콜백(callback)을 사용

Container 컴포넌트

• 동작(behavior) 로직
• 데이터 처리능력 있음
• Redux와 관련 있음
• 렌더링 되어야 할 데이터를 props 로써 데이터 처리 능력이 없는 컴포넌트인 Presentational 컴포넌트로 전달

Presentational 컴포넌트와 Container 컴포넌트의 추가정보
https://blog.naver.com/backsajang420/221368885149

• Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

스프린트를 통해 useSelector를 이용하여 store의 데이터를 불러 올 수 있고 useDispatch를 이용하여 action을 불러와 store의 데이터를 변경 할 수 있었다.
이전 자료에서 나온 Workflow를 보면 action이 스토어로 진행되면서 기존에 있던 state 가 action 과 reducer에서 만나서 새로운 state로 변하는 것을 확인 할 수 있다. 이렇게 변한 state는 store에 업데이트 된다.

---

thunk
redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어
액션 객체가 아닌 함수를 디스패치 할 수 있다.

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

redux-thunk의 코드

함수를 디스패치 할 때 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와주어야 하고 이 함수를 만들어주는 함수를 우리는 thunk 라고함.

참고자료
https://react.vlpt.us/redux-middleware/04-redux-thunk.html

---

낼모레 시험인데 집중을 못한다. 바보다 나는...