2023-02-01 useContext 대체 뭐길래.. useMemo?

원래는 단계별로 차근차근 props를 전달해야하는 형식

이렇게 하나하나 거쳐가는 것을 프롭 드릴링 이라고 한다.

하위만 필요한데, 굳이 중간 컴포넌트들이 받아야 해서

코드도 많고, props가 많아진다

 

contxt API는

상위 컴포넌트 값을 하위 컴포넌트 어디든 가져다 쓰도록 하는 api인것같다.

즉 전역적인 데이터를 관리하기 편리!

 

porps 대신 context로 사용해 데이터를 공유하면,

하위 컴포넌트에서 useContext를 사용해 데이터를 가져다 쓰는 것 입니다.

 

* context 는 꼭 필요할때만 사용!

• 사용시 컴포넌트를 재사용하기 어려워 질 수 있다.
• prop drilling을 피하기 위한 목적이면 Component Composition (컴포넌트 합성) 을 고려하라고 한다.

 

별코딩 참고

https://www.youtube.com/watch?v=LwvXVEHS638&t=325s 

참고

https://devbirdfeet.tistory.com/57?category=828965 

 

 

useContext

useContext라는 훅도 비슷하다

상위 컴포넌트 데이터를 useContext로 받아 쓸 수 있다.

 

사용법

1. createContext import , 객체 담기

ThemeContext.js

createContext(초기값);

안에 하위 컴포넌트에게 보내줄 데이터의 초기값을 넣는다.

 

2. 상위 컴포넌트에 해당 파일을 import 한다.

중간 컴포넌트 page에 props를 지우기

app.js 컴포넌트에서

import  { ThemeContext } from '.~~';

 

3. < ThemeContext.Provieder >로 보내줄 곳을 감싸기

value = {{보낼 값 , 보낼 값 ~}} 를 같이 넣어준다.

 

이제 받아오는 법 

4. useContext 사용 ( 하위 컴포넌트에서  )

- 만들어둔 createContext 즉, ThemeContext 를 import 해온다.

- useContext 선언하며, 인자로 ThemeContext 을 받아온다.

 

const data = useContext(ThemeContext );

console.log ( data ) ; 하면

 

컴포넌트 최적화를 위한 훅

useMemo란?

memo란 memoization을 뜻하는데

메모이제이션 ? 자주 필요한 값을 매번 계산하는 것이 아닌

캐싱을 해두어 저장을 해서 꺼내서 사용하는 것

즉 처음 계산값을 저장해두어 필요할때마다 꺼내 쓰는 것

 

함수형 컴포넌트가 랜더링 된다는건 함수 호출이 된다는 것

함수는 호출 될때마다 모든 내부 변수가 초기화 된다.

랜더링될때마다 value 변수가 초기화되어 반복적으로 calculate()함수가 호출 된다.

무의미한 계산을 계속 반복적 할당을 하게 된다면, 무거워진다.

memo로 재사용하면 좋다.

 

구조 

두개의 인자를 받는다

첫번째 콜벡, 두번째 배열을 받는다

콜벡함수는 메모이제이션 해서 리턴해줄 함수

두번째는 [의존성 배열]로 이 요소 값이 업데이트 될 때만 콜벡함수를 호출해서 메모이제이션 된 값을 다시 메모이제이션해서 업데이트 해준다.

[] 빈 배열은 컴포넌트가 첫 마운트 됬을때만 !

 

주의

불필요한 값들까지 메모이제이션 하게된다면, 성능 악화!

 

어떠한 조건이 만족됬을때만, 변수들이 초기화 되도록 할 수 있다.

예전값을 사용하는 메모이제이션

 

사용할 곳

 

 

2. value 변수로 useMemo ( () => 데이터 담아 캐싱? ) 해두어야 리랜더링 방지

 

3. <userContext.Provider 태그 안에 value = { value } 변수로 묶어준다 >

Provider가 연결 다리 역할 ( 손주에게 보내기 위한 )

=>

** 주의사항

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

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

 

https://devbirdfeet.tistory.com/79

React(28) 리액트 훅 useContext 란