React(28) 리액트 훅 useContext 란

useContext 란

context 를 사용할 때, (즉 할머니 컴포넌트가 특정 손주 컴포넌트 한테만 다이렉트로 데이터(용돈)를 쏴주려고 할 때)

그 귀여운 손주는 useContext 라는 훅을 사용해서 할머니의 데이터(용돈)를 받아 사용할 수 있다. (할머니땡큐)

 

 

** Context 와 Context API 의 자세한 기본 개념은 아래 포스팅을 참고해주세요.

React(26) 리액트 훅 Context API 란

 

---

 

Grandmama.js

- createContext( 안에 손주에게 보내줄 데이터의 초기값 ) 을 넣어둔다.

- value 변수로 = useMemo( (에) =>  데이터를 담아 캐싱) 해두어야 매번 새로고침시 리렌더링을 방지할 수 있다. ( 다음포스팅에서 useMemo를 확인하세요 !)

- <userContext.Provider 태그 안에  value = { value } 변수로 묶어준다 > Provider 가 연결다리 역할이다. 그래야 손주한테 보낼 수 있다.

 

Parent.js

아무것도 모르고 있음  😴 

 

Sonjoo.js

- useContext( 안에 UserContext )를 넣어주면 할머니 컴포넌트의 setMoney과 setCard을 쓸 수 있다.

- 버튼을 클릭하면 할머니 컴포넌트부터 전달받은 데이터상태가 변경된다. 

 

 

** 주의사항 

Provider 안에 넣어놓은 value가 하나라도 달라지면 useContext를 쓰고 있는 모든 컴포넌트가 리렌더링 된다. (쓸데없는 애들도 리렌더..)

value 안에는 setMoney 와 setCard 가 들어있고 앞으로 개수가 더 추가될 수 있다. 만약 그 중 하나라도 바뀌면 객체로 묶여있으므로 전체가 리렌더링 되는 것이다. 따라서 잘못 쓰면 엄청난 렉을 유발하게 된다.

 

 

ref: www.zerocho.com/category/React/post/5fa63fc6301d080004c4e32b