useContext

이번엔.. 그동안 계속 알아봐야지 하던 useContext를 조금 알아보자.

 

먼저 프론트엔드 개발을 하며 상태관리는 필연적인 요소이다.

어떻게 하면 더 직관적으로 상태를 소실하지 않고 여러 컴포넌트에서 잘 사용 할 수 있을까..

 

필자는 현재 apollo 를 사용하다 보니 redux를 사용하지않고 캐싱을 주된 store로 이용하고 있다.

그런데 이게 좀 어렵긴 하다. fragment를 해주고 cache를 modify하는 작업들이 뭔가 쉽진 않다.

이게 backend에서 어떻게 schema를 구성해주느냐에 따라서도 영향을 미치기 때문에..

 

일단 현재 필자가 사용하는 apollo caching을 한번보면

 

ㅓ

먼저 graphql서버로부터 유저의 프로필을 받아오는 hook을 하나 만들어서 통신을 한다.

fetchPolicy는 기본 동작인 cache-first로 하고 진행을 하면

요롷게! cache에 담아지게 된다. 음 브라우저가 어느 시점마다 캐시를 비우는지는 모르지만 캐시에 데이터가 남아 있다면

다시 api를 호출 하지 않고 만약 다시 호출하더라도 변경점이 있는 부분만 data전송이 웹의 성능에 아주 큰 영향을 끼친다.

 

아무튼! 이렇게 유저정보를 저장하고 사용을 하는데! 한가지 문제가 생겼다...

 

다른 컴포넌트에서 유저의 id를 가져오고 싶은데! client.readFragment를 쓰려면 위에 보이는 캐시데이터의 field name과 해당 id가 필요하다! 필자의 의도는 다시 통신하는 것을 방지하고 싶었다.

 

그럼 이걸 어떻게 넘겨 줄 수 있을까 하던차에

뭐 apollo의  makeVar와 useReactiveVar를 이용해서도 가능하겠지만

 

useContext를 이용해보고자 해서 노마드 코더의 강의를 듣기 시작했다.

곧 출근 준비를 해야 하므로 간단하게 오늘 들은 내용에 대해 복습해 보겠다.

 

먼저 useContext를 사용하려면 파일을 하나 만든다.

 

위에서 부터 차근차근 살펴보면 

먼저 createContext() api를 이용해 context 객체를 하나 생셩한다.

 

그런 다음 UserContextProvider라는 hook을 하나 만들어 주는데 prop으로 children을 받고

임의의 user 객체를 생성한다.

logUerIn이라는 함수는 user객체에 loggedIn을 true로 바꿔주는 함수이다.

 

그리고 중요한 return! UserContext.Provider라는 provider에 value로 user객체와 로그인 함수를 주고

children에 전달한다. 그 아래 함수 두개는 useContext hook을 이용해 user와 fn을 return하는 함수이다.

 

이제 header를 보자 너어무 간단하다... 위에서 만든 useContext를 사용한 hook을 가져와서

뿌려주기만 하면된다,, 

 

이대로 한번 지금 project 에 userId를 쓰는 걸로 한번 테스트 해봐야겠다..

store를 사용하다보니 바꿀필요가 있나 싶지만.. 그래도 배운거 한번써먹어보자.. 

 

요새 바쁘다 포스팅할게 많다.. 이상하게 라이브러리 사용은 그닥 별로인듯 해서 dropdown이든 pagination이든 직접 구현해서 component로 돌려쓰기 하고있는데 이것도 포스팅 예정이다.