링크:
https://codesandbox.io/s/young-cloud-h2ksq4?file=/src/App.js
이제 공식문서 보면서 노션에 정리할 예정..
render props가 익숙하지 않아서 지금 나혼자서 짜라고 하면 못짤거같음
암튼 그랫다
(여담)
const { Consumer: ColorConsumer } = ColorContext;
이런식으로 객체디스트럭쳐링할 수 잇다는건 첨봣음
그동안 항상
const ColorConsumer = ColorContext[Consumer] 이런식으로 했는데, 암튼 하나 더 배웟다...................
프붕이 귀엽다 내 기니피그가 되어줄래?
구글에 찾아보니 지구상의 포유류 중 가장 머리 나쁜 생명체가 '기니피그'래 ;ㅅ;!!!!
모든 상태관리 라이브러리의 기본이 context api야. 이거 자체는 사실 상태관리의 기능은 없고, props를 컨테이너 통해서 전역으로 넘겨주는 기능밖에 없는데 훅스로 상태관리를 하면서 그 훅스를 context api를 통해서 전역으로 넘겨서 전역상태관리를 하는거야. 리덕스는 훅스대신에 리덕스로 상태관리를 하면서 그걸 context api를 통해 전역으로 넘기는거고.
음 그러니까 내가 이해한거랑 너가 설명한걸 토대로 한번 설명해보자면,.. 1. Provider에서 훅스로 상태관리를 하고 수정된 value를 하위 컴포넌트에게 전달을 해주는데, 2. 하위 컴포넌트 Consumer은 자신과 가장 가까이에 있는 Provider의 value를 context로 부터 전달받는 식으로 작동한다 로 이해했는데, 혹시 이렇게 이해해도 될까???? 리덕스는 아직 안 배워서 모른당...... ㅎ.ㅎ
니가 이해한게 리덕스방식이야. 리덕스에서 쓰는게 무슨패턴이지?? 여튼 context API하고 훅스로 그 패턴을 구현한거야. 꼭 Provider, consumer를 안만들고 그냥 메인에서 useState 하나 만들고 그거 context API로 넘겨도 전역상태관리는 된다. 거기서 출발해야 이해가 되지, 처음부터 컨슈머니 하면 이해가 안될거야
헉 ... 끄응........... ㅠ.ㅠ...... 혹시 메인에 useState를 하나 만들고 그걸 context api로 넘긴다는게 혹시 무슨말인지 조금 더 물어봐도 될까..? 이해가 잘 안되어서.............
FLUX패턴이다
니 코드에서 컬러 프로바이더에서 유즈스테이트랑 컨텍스트생성을 했짢아 그거 그냥 컴포넌트로 따로 안빼고 app.js 에서 해도 됨. 상태를 관리하고 저장하는건 useState가 하는거고, 그 상태와 상태업데이트함수를 전달하는 역할이 context야. 프로바이더니 어쩌니 하는건 그냥 그걸 더 효율적으로 관리하기위해 만든 아키텍쳐고
아키텍쳐 이전에 이걸 왜쓰는지부터 이해를 하고나서 봐야 아키텍쳐도 이해가 되지않겠어?
flux패턴으로는 아직 적용하기 힘들지만... 대략적으로 정리된거같아... 잠시만!
1. context 상태와 상태 업데이트 함수를 전달해주는 역할 context의 consumer를 렌더링할 때 리액트에서는 해당 컨슈머 상위에서 가장 가까이 있는 provider를 읽는다. Provider의 상태(state)와 상태 업데이트(action)을 읽고, 이것들을 context의 value로 받아 주변 consumer로 전달해주는 역할을 한다 2. Provider context를 구독하는 consumer들에게 context의 변화를 알리는 역할을 한다. Provider안에서 useState로 state와 action을 수정하고 이를 value로 전달하면, context는 해당 value이 되고, consumer는 해당 context value를 받게 된다.
3. consumer context 변화를 구독하는 컴포넌트 앞서 설명하였듯이 가장 가까운 provider의 상태와 상태 업데이트 value는 context의 value가 되는데, consumer은 이 context value를 받아서 렌더링한다 따라서 consumer가 context로 부터 받은 value는 가장 가까운 Provider의 value props와 동일
한줄로 설명하자면, "context는 상태를 전달하기 위해, consumer의 주변 Provider의 value를 context의 value로 받고, 이 value를 consumer에게 전달한다" 이거...?
Flux 패턴이라고 하는게 어떤 의미인지는 알겠지만, context api의 각각 부분들을 flex패턴으로 적용하기는 좀 어렵넹.....
나도 그렇게 정리하고 보면 머리에 남는 게 없더라고, 직접 todo라도 계속 짜봐야지 싶음
ㄹㅇ.... 근데 둘다 병행해야 하는거 같음.... 책 예제를 안보고 공식문서 보면서 먼가를 짜보면 또 계속 막히고 그러니... 한번 내일은 context api랑 spa를 이용해서 먼가를 만들어봐야겟삼@@!!!!
요즘 머 공부하니 친구!?
컨텍스트 쓰지말고 상태관리 써. 별로 안 씀 저거
앗 리덕스 배우기 이전에 저거 이해해야할거같아서 배우는중이얌! 헤헷!!
context api 기반이 리덕스길랭 알아둬야겟어서 헤헷