useContext

단방향 데이터 흐름인 React를 사용 시,

props를 전달만 하는 컴포넌트가 발생하고 props의  작성과 수정도 어려워짐(props drilling)

 

useContext의 아이디어

<Provider/> 컴포넌트에 모든 데이터를 주고, 하위 컴포넌트에 직접 원하는 데이터들을 주어 props drilling을 없앰

 

useContext

예시

reateContext 내부에 공유하길 원하는 데이터의 초깃값을 넣어두고 value 변수로 묶어준다.

UserContext.Provider로 감싼뒤 ,value props에 value를 넣어줌

import React, { createContext, useMemo, useState } from 'react';
import Parent from './Parent';

export const UserContext = createContext({
  setLoggedIn: () => {},
  setLoading: () => {},
});
const GrandParent = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [loading, setLoading] = useState(false);
  const value = useMemo(() => ({ setLoggedIn, setLoading }), [setLoggedIn, setLoading]);
  return (
    <UserContext.Provider value={value}>
      <Parent />
      <div>{loggedIn ? '로그인' : '로그인안해'}</div>
      <div>{loading ? '로딩중' : '로딩안해'}</div>
    </UserContext.Provider>
  );
};
export default GrandParent;

import React from 'react';
import Children from './Children';

const Parent = () => {
  return <Children />;
};
export default Parent;

 

 

useContext를 불러와서 안에 UserContext를 넣어주면, Parent에서 props를 전달받지 않았음에도

setLoading과 setLoggedIn을 받아올 수 있다.

import React, { useContext } from 'react';
import { UserContext } from './GrandParent';

const Children = () => {
  const { setLoading, setLoggedIn } = useContext(UserContext);
  return (
    <>
      <button onClick={() => setLoading((prev) => !prev)}>로딩토글</button>
      <button onClick={() => setLoggedIn((prev) => !prev)}>로딩토글</button>
    </>
  );
};
export default Children;

출처:https://www.zerocho.com/category/React/post/5fa63fc6301d080004c4e32b