※ useContext
- 자식 컴포넌트의 DEVS가 많은 경우 최상위 컴포넌트에서 최하위 자식 컴포넌트까지 값을 일일이 전달하는 것이 비효율적
- 이처럼 Prop을 통해서 중간단계의 컴포넌트들이 계속 값을 전달하는 상황 (prop Drilling)
- 이때 Context API를 활용한 useContext hook을 활용하면 컴포넌트 외부에 전역으로 특정 값을 관리하며 자식 컴포넌트에게 바로 값 전달 가능
createContext : context 생성 후 Provider를 통해 전역으로 특정 값을 전달 가능
useContext : createContext로 생성된 값을 원하는 자식 컴포넌트에서 자유롭게 호출 가능
사용 순서)
1. 전역으로 관리할 저장객체 생성
- createContext를 이용해서 초기값을 null로 지정한 빈 객체를 생성
- 해당 빈 객체는 추후 루트 컴포넌트인 App에서 Provider로 해당 값을 전역으로 자식요소에 전달
예제)
import { createContext } from 'react';
export const LoginContext = createContext(null);
2. 전역으로 생성한 빈 저장객체에 원하는 값을 저장
- null로 빈값이 저장되어 있는 LoginContext에 Provider로 원하는 값을 value로 지정해서 전달
- 해당 LoginContext가 전체 컴포넌트들을 감싸고 있기 때문에 모든 자식 컴포넌트들은 추후 useContext를 이용해서 해당 값에 자유롭게 접근 가능
예제)
<LoginContext.Provider value={{ Login, setLogin }}>
<main>
<Header />
<Content />
</main>
</LoginContext.Provider>
3. 전역 정보값을 가져와서 로그인, 로그아웃 버튼 클릭시 해당 전역 정보값을 자유롭게 변경
- useContext를 이용해서 LoginContext값을 자유롭게 사용 가능
예제)
const login = useContext(LoginContext);
return (
<article>
<button onClick={() => login.setLogin(true)}>login</button>
<button onClick={() => login.setLogin(false)}>logout</button>
</article>
);
'IT > React' 카테고리의 다른 글
[React] redux , react-redux 정리 (0) | 2023.07.11 |
---|---|
[React] useReducer 정리 (0) | 2023.07.11 |
[React] memoization 정리 (0) | 2023.07.10 |
[React] FramerMotion 정리 (0) | 2023.07.10 |
[React] img onError 속성 정리 (0) | 2023.07.10 |