Doc: 메인 페이지 작업 (2)

[hyeon81]

React hook useContext

• 전역변수를 사용할 수 있어요

• 여기선 gnb의 제목과 버튼들을 조작하기 위해서 사용

• 컨텍스트 생성 (GnbContext.ts)

  
  import React from 'react'

const GnbContext = React.createContext(null) export default GnbContext

* 전역변수로 쓸 값 생성 및 GnbContext.Provider로 전역변수로 설정하기 (MainLayout.tsx) - gnb, setGnb를 내려보냅시다

const [gnb, setGnb] = useState<{ title: string back: boolean add: boolean }>({ title: '전체 보기', back: false, add: true, })

return ( <GnbContext.Provider value={{gnb, setGnb}}>

{children}

</GnbContext.Provider>

)

Context.Provider = value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달함
* 특정 페이지에 접근할때마다 title을 세팅하기 - MainPage 접근했을 경우

const { setGnb } = useContext(GnbContext)

useEffect(() => { setGnb({ title: '전체 보기', back: false, add: true }) }, [])

이렇게 하면 어떤 페이지에 접근했냐에 따라 title과 뒤로가기버튼, 새글 쓰기 버튼을 알맞게 세팅해줄 수 있다.