[TIL] 2023-02-11

리액트로 프로젝트를 진행할 때, 페이지를 구성하는 컴포넌트가 점점 깊어지는 상황에서 최상위 컴포넌트에서 원하는 컴포넌트까지 속성(props)를 통해 정보를 전달하는 과정이 너무 길어지는 상황이 발생함, 그래서 useContext 훅을 통해 전역적으로 상태를 관리하여, 어떤 자식(손자) 컴포넌트에서든 바로 정보를 얻을 수 있게함. (이러한 방식은 정상적인 흐름을 부수는 작업이라 권장되지 않는다고 하여 추후 리팩토링 예정)

• 컴포넌트의 속성(props) - 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용하는 메커니즘

• 컨텍스트 기능 구현을 위해 컨텍스트 객체를 생성이 우선 - createContext()

  import React, {createContext} from 'react'
  
  type ContextType = {
  // 공유할 데이터 속성
  }
  const defaultContextValue: ContextType = {
  // 공유할 데이터 속성 초기값
  }
  export const SomeContext = createContext<ContextType>(defaultContextValue);

  
  

• 컨텍스트 객체가 제공하는 Provider 컴포넌트 - 컨텍스트의 기능을 제공할 컴포넌트

  import type {FC, PropsWithChildren} from 'react'
  
  type SomeProviderProps = {}
  export const SomeProvider: FC<PropsWithChildren<SomeProviderProps>> = ({
    children,
    ...props
  }) => {
    
    const value ={}
    
    return <SomeContext.Provider value={value} children={children} />
  }

  import {SomeProvider} from './contexts'
  import page from './page' 
  
  export default function App() {
  return (
    <SomeProvider>
    	<main>
    		<page />
    	</main>
    </SomeProvider>
    )
  )