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`함수는 이전에 계산된 값을 저장하여, 동일한 입력값에 대해서는 함수를 다시 실행하지 않고 이전에 계산된 값을 반환함으로 불필요한 함수 호출을 피하며 렌더링 성능 개선 :) !!
'[FrontEnd] 프론트엔드' 카테고리의 다른 글
| [Javascript] Higher-Order Function(고차함수)란? (1) | 2023.03.16 |
|---|---|
| [Javascript] 커링(Currying)이란? (0) | 2023.03.16 |
| [TypeScript] 타입스크립트란? + (기본 타입) (0) | 2023.03.06 |
| [React] useState (1) | 2023.02.17 |
| [React] 컴포넌트란 ? (0) | 2023.02.17 |