useContext
context?
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};App >> Toolbar >> ThemedButton
function App() {
return (
<Toolbar theme={themes.dark}/>
);
}
//ThemedButton에서만 쓰이는 테마를 굳이 Toolbar에서도 props로 넘겨야 한다.
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme}/>
</div>
);
}
function ThemedButton(props) {
return (
<button style={{ background: props.theme.background, color: props.theme.foreground }}>
I am styled by theme context!
</button>
);
}context를 사용한다면
- createContext를 통해 context를 생성한다.
const ThemeContext = React.createContext(themes.light);- context.Provider를 통해 값을 주입한다.
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>);
}
// 이제 Toolbar가 굳이 props를 안 넘겨줘도 된다!
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>);
}- useContext(context)를 통해 컨텍스트를 꺼내서 사용한다.
function ThemedButton() {
// 주의! 인자 값으론 반드시 context 객체 자체가 들어가야함. ThemeContext.background 안 됨!
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}팁
import React, { createContext } from 'react'
const AppContext = createContext()
// ...
const User = () => {
const appContext = useContext(AppContext)
// ...
}이 예시와 같이 사용하다 보면 여러 Context를 모두 인지하고 있어야 하고, Context를 전달하기 전에 추가적인 처리를 해주고자 한다면 유연성이 부족하다는 이슈가 있다.
import React, { createContext, useContext, useMemo } from 'react'
const AppContext = createContext()
const useAppContext = () => useContext(AppContext)
// ...
const User = () => {
const appContext = useAppContext()
// ...
}이 예시와 같이 유의미한 이름을 지정하고 사용하면 Context를 인지할 필요 없이 Custom Hooks를 사용하는 것처럼 작성할 수 있으며, 코드를 읽기도 한결 더 수월하다.
useMemo
Memoization?
기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
→ 중복연산을 피할 수 있어 메모리를 좀 더 쓰지만 성능을 최적화 할 수 있음.
import React, { useMemo } from "react"함수형 컴포넌트의 실행이 느리다면?
아래 컴포넌트는 prop으로 넘어온 x와 y 값을 compute 함수에 인자로 넘겨서 z 값을 구한 후, 그 결과값을 div 엘리먼트로 감싸 출력해줌.
function MyComponent({ x, y }) {
const z = compute(x, y)
return <div>{z}</div>}만약에, compute 함수가 내부적으로 매우 복잡한 연산을 수행하기 때문에 결과값을 리턴하는데 시간이 몇초 이상 오래 걸린다면?
컴포넌트의 재 렌더링이 필요할 때 마다 이 함수가 호출
→ UI에서 지연이 발생
함수형 컴포넌트에 memoization 적용
- 랜더링이 일어날 때 마다,
compute함수의 인자로 넘어오는x와y값이 항상 바뀌는 게 아니라면 굳이compute함수를 계속 호출할 필요가 없음. - 랜더링이 발생했을 때, 이전 랜더링과 현재 랜더링 간에
x와y값이 동일한 경우, 다시 함수를 호출을 하여z값을 구하는 대신, 기존에 메모리의 어딘가에 저장해두었던z값을 그대로 사용
useMemo 함수는 2개의 인자를 받는데,
첫번째는 결과값을 생성해주는 팩토리 함수이고,
두번째는 기존 결과값 재활용 여부의 기준이되는 입력값 배열
function MyComponent({ x, y }) {
const z = useMemo(() => compute(x, y), [x, y])
return <div>{z}</div>}x와y값이 이 전에 랜더링했을 때와 동일할 경우, 이 전 랜더링 때 저장해두었던 결과값을 재활용 하지만,x와y값이 이 전에 랜더링했을 때와 달라졌을 경우,() => compute(x, y)함수를 호출하여 결과값을 새롭게 구해z에 할당
