Kong/method etc#17
Conversation
|
|
||
| 그런데 코드 분석 중 `createContext`과 `useContext`을 맞닥뜨리게 되었다… 그게 뭔데? `useState`나 `useRef`같은 것들만 사용해오던 나에게는…. 너무 어려웠다….n | ||
|
|
||
| 공식 문서를 자세하게 읽어봐도 잘 모르겠어서 아는 프론트엔드 개발자분들께 여쭤보니 context가 최상단에서 상태를 저장해두고 상단에서 context provider를 설정해두고 쏴주는거라고,,, 약간 전역 변수처럼 쓰이는 친구인가보다... |
There was a problem hiding this comment.
직접 Context와 Provider를 구현해서 여기 branch에 남기면 좋을거 같아요. 그러면 다른 분들이 릴레이로 작성해서 커밋하고 등등하는 행위가 일어나도 좋을거 같아요.
|
|
||
| context에 포함된 react provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. | ||
| provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. 값을 전달받을 수 있는 컴포넌트 수에 제한은 없다. | ||
| provider 하위에 또 다른 provider를 배치하는 것도 가능하며, 이 경우 하위 provider의 값이 우선시된다. |
There was a problem hiding this comment.
이건 어떤 문서에서 참고했을까요? 이중 provider는 처음 들어봤고 그런 패턴을 본적이 없어서 매우 흥미롭네요! 한번 구현해 주셔도 좋을거 같아요. 약간 React Provider와 Recoil은 동시에 사용하는 방법일까요?
|
|
||
| 하,,,, | ||
|
|
||
| 분명? 나는 리액트 컴포넌트의 성능을 런타임에도 적은 오버헤드로 telemetry 할 수 있는 프로파일링 라이브러리를 만들고 있었는데, 해당 라이브러리를 그냥 쌩으로 만들기에는 지식이 너무 없었다. |
There was a problem hiding this comment.
이 부분도 너무 궁금한... 정확힌 어떤 개발과 시도를 하시려 했던건지 알고 싶어요. 지난번에 공유해주신 내용같은데 추후에 시간이 되면 이 부분도 추가해서 작업하면 좋을거 같아요.
There was a problem hiding this comment.
앗 작업 완료 후 배포까지 하게 된다면 추가해놓겠습니다...
지금은 공부하다가 context에서 막힌 상태라... 둘 다 어느 정도 이해는 햇습니다
| provider는 값을 넣는 쪽, context는 값을 꺼내는 쪽이라고 보면 될 것 같다. | ||
| Provider 없이 useContext만 쓰면 값이 null이고, useContext 없이 Provider만 쓰면 값을 꺼내지 못한다... | ||
|
|
||
| ```js | ||
| const UserContext = createContext(null); | ||
|
|
||
| // Provider → 값을 "넣는" 쪽 | ||
| <UserContext value={{ name: "홍길동" }}> | ||
| <App /> | ||
| </UserContext>; | ||
|
|
||
| // useContext → 값을 "꺼내는" 쪽 | ||
| function GrandChild() { | ||
| const user = useContext(UserContext); // 꺼냄 | ||
| } | ||
| ``` |
There was a problem hiding this comment.
@za0012 님께선 IO(input/output)로 해석해 주셨는데요. 뭔가 저는 Provider를 useContext에 있는 값들을 등록, 호출을 모두 해줄 수 있는 호스라고 이해를 했어요. 좀 더 제가 살펴봐야 겠어요.
Removed an image and added a new image to explain Prop Drilling in React context.
Add an image to illustrate the concept of Prop Drilling.
|
우선 context를 구현해봤습니다... props drilling 코드를 받은 후 context로 변환하는 작업을 했는데요, 생각보다 쉬워서 제가 잘 한 게 맞는지 의아하네요... |
2 participants
Summary
Changes
관련 이슈
#16