[ React ] - 훅(Hook) 종류와 사용법 ( useContext / useMemo )

[ React ] - 훅(Hook) 종류와 사용법 ( useContext /  useMemo )

useContext

react에서 컴포넌트 간 상태 공유를 위해 사용되는 props는 기본적으로 상위컴포넌트에서 하위 컴포넌트로 내려주는 형태이다. 이는 만일 A -> B -> C 로, A 컴포넌트에 B 컴포넌트가 속하고 B 컴포넌트에 C컴포넌트가 속하는 상황에서 A컴포넌트에 있는 props를 C컴포넌트에서 사용하기 위해 해당 props가 B 컴포넌트에서 필요하지 않음에도 불구하고, B 컴포넌트에서도 props로 넘겨받고 내려주는 불필요한 코드를 작성하게 한다. 이러한 불필요한 코드 작성을 줄이기 위해 사용되는 것이 useContext() hook이다.

useContext()는 프로젝트 내에서 사용자 정보와 같이 전역적으로 사용되는 데이터를 여러 컴포넌트에서 쉽게 사용할 수 있도록 도와주는 기능을 제공하는 함수이다. useContext()를 사용하면 위와 같은 상황에서 B 컴포넌트를 거치지 않아도 C컴포넌트에서 A컴포넌트에 있는 데이터를 손쉽게 사용할 수 있다.

사용법

기본적으로 구조는 App -> ComponentEx -> ContextEx 구조로 되어있다. App에 있는 데이터를 ComponentEx를 거치지 않고ContextEx에서 사용할 것이다.

1. context 만들기 
Provider.tsx파일 생성 후 아래와 같이 작성하여 준다. 이는 우선 데이터를 담을 보관함을 생성하는 것이라 할 수 있다.

2. App.tsx 컴포넌트에서 context 설정 

1의 단계에서 생성한 Context를 불러와서 하위 컴포넌트를 감싸주고, 하위 컴포넌트에서 전역으로 관리할 데이터를 넣어준다. 
ex) <Context.Provider value={{backgroundColor, setBackgroundColor}}> /// </Context.Provider>

3. context 만들기 
Provider.tsx파일 생성 후 아래와 같이 작성하여 준다. 이는 우선 데이터를 담을 보관함을 생성하는 것이라 할 수 있다.

~ ComponentEx 컴포넌트에서는 context data를 사용하지 않는다.

4.  context 데이터를 사용할 때는 useContext를 사용하여 데이터를 가져와 사용한다.

 

useMemo

useMemo()란 메모이제이션 된 값을 반환해주는 기능을 제공하는 react hook이다. 컴포넌트가 렌더링 될 때에는 해당 컴포넌트에 속한 모든 변수가 초기화되는데, 이때에 useMemo()는 동일한 결과값을 출력하는 특정 함수에 대한 결과를 메모리에 저장해두었다가 리렌더링시 사용함으로써 불필요한 중복 연산을 제거하고 실행 속도를 높여 준다.

useMemo()는 기본적으로 useMemo(()=>fn, []) 이와 같은 식으로 사용된다. useEffect()의 경우와 같이 두 번째 인자로 배열을 주지 않는 경우에는 매 렌더링 때마다 연산이 새롭게 이루어지며, 해당 빈 배열을 준 경우에는 초기에만 연산을 실행하고, 이후 렌더링 시에는 메모리에 저장된 값을 사용한다. 배열 안에 dependency, 즉 state나 props 값을 넣어준 경우에는 해당 state가 변하는 경우에만 연산을 다시 한다.

useMemo()는 메모리에 값을 저장해두는 것이기 때문에 useMemo()를 무분별하게 사용하면 메모리 낭비가 발생할 수 있다. 때문에 state나 props가 자주 변하지 않고, 복잡한 연산 등의 계산을 실행하는 경우에만 사용하는 것이 좋으며, api 요청과 같은 비동기 작업의 경우에는 useMemo()를 사용하지 않도록 주의해야 한다.

위의 코드 실행 시 button을 누를 때마다 onClickAddValue() 함수와 value를 dependency로 넣은 useMemo()가 실행되어 연산을 다시 함으로써 아래와 같이 콘솔이 출력되고, value는 1씩 커지게 된다.

반면에 second button을 클릭시에는 'onclick add second value'만을 출력한다. 이는 value의 값이 변경되었을 때 그 연산값을 메모리에 저장해둔 값을 사용하기 때문에 second button을 눌러도 기존의 메모리에 저장해둔 값을 가져와 사용하기 때문이다.

 

출처

useMemo https://www.youtube.com/watch?v=e-CnI8Q5RY4 

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