[React] createContext, useMemo

1. `createContext`함수란?

React에서 컴포넌트 간 데이터를 공유하기 위해 사용하는 함수.

이 함수를 사용하여 생성된 컨텍스트 객체는 `Provider`와 `Consumer`를 제공 ! 

• Provider : 컨텍스트 값을 설정하는 컴포넌트, 컨텍스트 값을 설정하면 하위 컴포넌트에서 해당 값을 사용할 수 있다.
• Consumer : 컨텍스트 값을 사용하는 컴포넌트, 하위 컴포넌트의 `props`나 `state`와 같은 방법으로 컨텍스트 값을 사용할 수 있다.

import { createContext } from 'react';

const UserContext = createContext(null);

function App() {
  const user = { name: 'John', age: 30 };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  return (
    <UserContext.Consumer>
      {user => (
        <div>
          <h2>{user.name}</h2>
          <p>{user.age}</p>
        </div>
      )}
    </UserContext.Consumer>
  );
}

위 코드에서 `App` 컨포넌트에서 `UserContext.Provider`을 사용하여 `value` 속성에 `user`객체를 전달하였고,

`Profile`컴포넌트에서 `UserContext.Consumer`을 사용하여 `user`객체를 사용하였다.

 

=> `createContext`함수를 사용하면 하위 컴포넌트에서 부모 컴포넌트 값을 쉽게 공유 가능 ! 

 

 

 

 

2. useMemo

React에서 렌더링 성능을 최적화 하기 위해 사용하는 Hook ! 

두 개의 매개변수를 받아 사용 ( 1st. 결과를 캐시할 함수 , 2nd 의존성 배열 ) => 이 값들 중 하나라도 변경되면 다시 실행 !

** 캐시(cache) : 이전에 계산된 값을 저장해 놓는 것을 의미 ! 

 

`useMemo`함수는 이전에 계산된 값을 저장하여, 동일한 입력값에 대해서는 함수를 다시 실행하지 않고 이전에 계산된 값을 반환함으로 불필요한 함수 호출을 피하며 렌더링 성능 개선 :) !!