오늘은 CreateContext,useContext의 대한 포스팅을 하려한다.

그동안 되게 포스팅 자체가 뜸했는데 다시 이제부터 시작해야겠다.

자 먼저 큰 틀로 세가지 개념을 알고있으면 된다.

CreateContext:

createContext는 React에서 상태 관리를 위한 컨텍스트(Context)를 생성하는 함수이다. 이 함수는 컴포넌트 트리 전체에서 전역적으로 상태를 공유하기 위한 메커니즘을 제공한다.

컨텍스트를 사용하면 부모 컴포넌트에서 생성한 상태나 함수를 자식 컴포넌트에서 별도의 전달 없이 직접 사용할 수 있다. 이것은 상태를 여러 컴포넌트 간에 전파하거나 공유하는 데 매우 유용하다.

Provider:

Context.Provider는 다음과 같은 주요 역할을 수행한다

값 설정 (Providing Values)

Context.Provider는 해당 컨텍스트의 범위를 제공한다. 해당 범위 내에서 컨텍스트 값을 사용하는 하위 컴포넌트에게만 값이 전달된다.

컴포넌트 트리의 깊이에 상관없는 전역 상태 관리:
Context.Provider는 컴포넌트 트리의 어떤 깊이에서도 사용할 수 있다. 따라서 상태를 필요로 하는 컴포넌트가 어디에 있든지 불문하고 해당 상태에 접근할 수 있게 한다.

동적으로 값 변경:
Context.Provider의 value prop을 동적으로 변경할 수 있다. 이는 컨텍스트 값이 변경될 때 하위 컴포넌트에 즉시 반영되도록 한다.

useContext:

보통 우리가 context api를 사용하여 provider의 담긴 value값을 사용하려면 AppContext.consumer << 이런식으로 접근하지만 훨씬 사용법이 간단해졌다.

아래 예제를 보자 .

<script>
import "./styles.css";
import Counter from "./component/Counter.tsx";
import {createContext} from "react"
import Children from "./component/Children"

export const AppContext = createContext() // 컨텍스트 생성 

export default function App() {
  const user ={                  //AppContext.Provider value로 들어갈 부분
    name:"minhae",
    age:32,
    job:"vocalist"
  }


  return (
    <div>
      <AppContext.Provider value={user}>     //value를 쓰지않는다면 에러가 뜬다
        <div>
          <Children />
        </div>
      </AppContext.Provider >
    </div>
  );
}
</script>

위와같이 전역변수로 컨텍스트를 생성하고 App 컴포넌트 안에서 Provider value로 사용될 데이터를 선언했다.

AppContext.Provider value={user}
부분 하단에 Children component가 보일 것 이다.

이제 Children component로 넘어가서 코드를 확인해보자.

<script>
import {AppContext} from "../App"
import {useContext} from "react"

const Children = () => {
   const user = useContext(AppContext)
  return (
    <div>
       <h1>{user.name}</h1>
       <h1>{user.age}</h1>
       <h1>{user.job}</h1>
    </div>
  );
};
export default Children;
</script>

위 코드를 보면 전역으로 우리가 선언했던 AppContext를 import하여 사용하였고
react hook인 useContext역시 import하였다.

useContext의 사용법은 인자로 만들었던 컨텍스트를 넣어주면된다.

const user = useContext(AppContext)이렇게 말이다

그렇게 되면 user라는 변수안에 컨텍스트의 데이터가 들어가있기때문에 props drilling을 할 필요가 없게된다.

위와같이 사용하게 되면 화면에 데이터가 잘 출력 될 것이다.