배경지식
부모 컴포넌트에서 자식 컴포넌트로 props 를 통해 데이터를 전달함
하지만 그 깊이가 깊어질수록 거쳐가야 하는 컴포넌트들이 많아지고 코드를 반복적으로 작성해야하고
변수명이 바뀌면 거쳐가는 모든 컴포넌트에서 변수명을 수정해야하는 비효율적인 일들이 발생함.
Context 란
- context 를 이용하면 단계마다 일일이 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음
- 데이터가 필요할 때마다 props 를 통해 전달할 필요가 없이 context 를 이용해 공유함
context 는 꼭 필요할때만!
- context 를 사용하면 컴포넌트를 재사용하기 어려워질 수 있음
- prop drilling 을 피하기 위한 목적이라면 component composition ( 컴포넌트 합성 ) 을 먼저 고려해야함.
Context API 의 세가지 개념
createContext
- Context 객체를 생성함
import { createContext } from "react";
export const userContext = createContext(null)
대부분 context 파일을 따로 만드는 편인듯
- createContext 의 인자값은 초기값으로 Provider 에서 value 값을 전달하지 않으면 초기값으로 값이 전달된다.
Provider
- 생성한 context 를 하위 컴포넌트에게 전달하는 역할을 한다.
function App() {
const [ user, setUser ] = useState("")
const handleChangeInput = (e) => {
setUser(e.target.value)
}
return (
<UserContext.Provider value={user}>
<div className="App">
<input type="text" placeholder='username' onChange={handleChangeInput} />
<User />
</div>
</UserContext.Provider>
);
}
user 말고 몇 개 더 value 로 넣고 싶다면 , {} 중괄호를 하나 더 추가해 오브젝트로 값을 넣어주면 된다.
Consumer
- context 의 변화를 감시하는 컴포넌트
useContext 사용하기
import React, { useContext } from "react";
import { UserContext } from "../\bcontext/UserContext";
function User() {
const user = useContext(UserContext);
return <div>안녕하세요 {user}입니다.</div>;
}
export default User;
데이터를 갖고 있는 context 를 useContext 를 사용해서 불러와준 뒤, 변수에 저장을 해준다.
'React > 이론공부' 카테고리의 다른 글
[React Hooks] useCallback (0) | 2023.01.25 |
---|---|
[React Hooks] useMemo (0) | 2023.01.24 |
[React Hooks] useRef (0) | 2023.01.24 |
[React Hooks] useEffect (0) | 2023.01.24 |
[React Hooks] useState (0) | 2023.01.20 |