utterances-bot commented 4 years ago

5. 카운터 구현하기 · GitBook

https://react.vlpt.us/redux/05-counter.html

leesd88 commented 3 years ago

CountContainer() 에서 useSelector나 useDispatch를 사용할때 코드상으로는 스토어나 모듈과 연결된 것이 보이지 않습니다. 가 에 감싸져 있다는 이유만으로 그 이하 useSelector 및 useDispatch가 자동으로 연동되어 상태와 함수를 가져올 수 있는 것인가요? 리덕스 3가지 규칙 첫번째 하나의 App.에는 하나의 스토어만 있다가 전제된다면 원래 그런것인가 싶기는 한데, 스토어의 수를 여러개 만들 수도 있다하시니 추정에 한계가 있습니다.

leesd88 commented 3 years ago

위 댓글 달았는데 태그로 작성한것이 사라져서 다시 씁니다.

CountContainer() 에서 useSelector나 useDispatch를 사용할때 코드상으로는 스토어나 모듈과 연결된 것이 보이지 않습니다. CountContainer 태그가 Provider store={store} 태그에 감싸져 있다는 이유만으로 그 이하 useSelector 및 useDispatch가 자동으로 연동되어 상태와 함수를 가져올 수 있는 것인가요? 리덕스 3가지 규칙 첫번째 하나의 App.에는 하나의 스토어만 있다가 전제된다면 원래 그런것인가 싶기는 한데, 스토어의 수를 여러개 만들 수도 있다하시니 추정에 한계가 있습니다.

cjnghn commented 2 years ago

컴포넌트를 두 개(Container, Presentational)로 나누는 것이 필요한가 궁금해서 좀 더 찾아보니 아래와 같은 링크를 찾았습니다. 도움되시길 바랍니다!

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

theMostPowerful commented 2 years ago

컴포넌트를 두 개(Container, Presentational)로 나누는 것은 재사용성을 확보하기 위해서 라고 공부했숩니당!

카운터 없이 컴포넌트를 만들면 스토어가 포함되어있을텐데 그러면 다른곳에서 재사용할때도 스토어등 필요한것 다 같이 가져가야하니까 props로 이루어진 카운터 컴포넌트를 만드는..?거죠ㅎㅎ(?) 잘몰라여 ㅎㅎ

kkn1125 commented 2 years ago

leesd88님 의견을 나누고자 합니다.

CountContainer 컴포넌트에서 useSelect와 useDispatch를 사용할 때 말씀대로 코드상에서는 보이지 않지만 useDispatch의 작성 코드를 보면 context여부에 따라 useDefaultStore혹은 createStoreHook에 context를 전달하여 메서드를 호출합니다. 호출된 메서드는 store를 반환하고, store의 dispatch를 최종적으로 반환합니다.

useSelect의 경우 작성 코드를 보면 useContext를 사용해서 Provider에 저장된 store를 조회하고, 최종적으로 combineReducer에 넣었던 state들을 가진 store를 반환합니다.

Provider의 경우 nesting한 App컴포넌트에 속하는 모든 컴포넌트에서 사용할 수 있도록 store값을 지정합니다. Provider를 정의해놓은 코드를 보면 Provider가 React의 Context기반으로 만들어져있기 때문에 useContext를 사용하는 것과 유사하다고 보여집니다.

완전히 이해한 내용이 아니기 때문에 redux github 저장소의 코드와 redux docs에서 설명하는 내용을 참조하시는 것을 추천드립니다..

velopert / react-tutorial

5. 카운터 구현하기 · GitBook #40

5. 카운터 구현하기 · GitBook