1
| const value = useContext(SomeContext)
|
Parameters
SomeContextcreateContext로 생성된 어떠한 context
Returns
- 가장 가까운
SomeContext.Provider에 전달된 value값을 반환 Provider가 없는 경우 defaultValue가 된다.- 반환되는 값은 항상 최신이며, context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링한다.
Usage
객체 및 함수 전달 시 리렌더링 최적화
context로 객체 및 함수를 포함한 모든 값을 전달할 수 있는데, 이때 객체 및 함수는 MyApp이 리렌더링 될때마다 다시 생성된다. 따라서 useContext로 이 context를 가져오는 컴포넌트들도 실제로 값이 변경되지 않았어도 리렌더링된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function MyApp() {
const [currentUser, setCurrentUser] = useState(null);
function login(response) {
storeCredentials(response.credentials);
setCurrentUser(response.user);
}
return (
<AuthContext.Provider value=>
<Page />
</AuthContext.Provider>
);
}
|
이때는 다음과 같이 useMemo 또는 useCallback을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function MyApp() {
const [currentUser, setCurrentUser] = useState(null);
const login = useCallback((response) => {
storeCredentials(response.credentials);
setCurrentUser(response.user);
}, []);
const contextValue = useMemo(() => ({
currentUser,
login
}), [currentUser, login]);
return (
<AuthContext.Provider value={contextValue}>
<Page />
</AuthContext.Provider>
);
}
|
