[리액트] 공식문서 읽기 : useContext

- Props Drilling 피하기 위해 context를 사용해 데이터를 전달하는 과정이 필요하다

 

Context 사용 전에 먼저 고려해야 할 사항

1. Props 전달

2. 컴포넌트를 추출하여 JSX를 Children으로 전달 

 

Context 적합한 사용 예시 

1. 테마 지정 : 최상위에서 조정

2. 현재 계정 정보

3. 라우팅 정보

4. reducer를 context와 함께 사용

 

문제 상황 예시)

export default function Section({children}) {
	return (
    	<section className = "section">
        	{children}
        </section>
    );
}

 

Section 내의 모든 Heading 태그가 레벨 3이길 원함

 

 

Context 사용 예시)

 

- Heading 이Context에서 Level 정보를 알 수 있도록 함

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

 

 

- Section의 child컴포넌트에 Context를 제공하기 위해 Context Provider로 감싸줌

 

import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
	const level = useContext(LevelContext);
	return (
    	<section className = "section">
        	<LevelContext.Provider value = {level + 1}>
            	{children}
            </LevelContext.Provider>
        </section>
    );
}

import { createContext } from 'react';

export const LevelContext = createContext(1);

 

 

---

 

 

Context로 객체와 함수를 전달할 때 리렌더링 최적화하기 

function MyApp() {
	const [currentUser, setCurrentUser] = useState(null);
    
    function login(response) {
    	storeCredentials(response.credentials);
        setCurrentUser(response.user);
    }
    
    return (
    	<AuthContext.Provider value = {{currentUser, login}}>
        	<Page />
        </AuthContext.Provider>
    );
}

 

import {useCallback, useMemo} from 'react';

function MyApp() {
	const [currentUser, setCurrentUser] = useState(null);
    
    // useCallback 이용
    const login = useCallback((response) => {
    	storeCredentials(response.credentials);
        setCurrentUser(response.user);
    }, []);
    
    // useMemo 이용
    const contextValue = useMemo(() => ({
    	currentUser,
        login
    }), [currentUser, login]);
    
    return (
    	<AuthContext.Provider value = {contextValue}>
        	<Page/>
        </AuthContext.Provider>
    );
}

 

---

https://ko.react.dev/reference/react/useContext

useContext – React