Context API의 기초적인 사용방법(useContext)

Context API

 애플리케이션 안에서 전역으로 사용되는 데이터를 공유하는 방법을 제공하는 API이며, Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 이를 사용하면 자식 컴포넌트에게 지속적으로 props를 넘겨주지 않아도 되기 때문에 props drilling을 방지할 수 있다.

 

 

사용 방법

 먼저 context를 정의할 새로운 파일을 만들고 아래와 같이 작성해 주면 된다. defaultValue는 Provider로 value를 제공해주지 않을 경우 사용되는 고정값을 의미하며, 컴포넌트를 독립적으로 테스트할 때 유용한 값이다.

 

//context/ThemeComtext.js

import { createContext } from 'react'

export const ThemeContext = createContext(defaultValue)

 

 

 context를 정의했다면, 최상위 컴포넌트에서 Provider로 감싸주면 전역에서 사용할 수 있다. 이때 value로 값을 넘겨줘야 하며, 이 과정이 없다면 useContext를 사용했을 때 defaultValue 값이 출력되게 된다.

 

// App.js

import { ThemeContext } from './context/ThemeContext'

function App() {
   const [isDark, setIsDark] = useState(false)
   
   return (
      <ThemeContext.Provider value={{isDark, setIsDark}}>
         <Page />
      <ThemeContext.Provider />
   )
}
  
export default App

 

 

 최상위 컴포넌트에서 정의했다면 이후 하위 컴포넌트에서는 useContext 훅을 사용해서 값에 접근할 수 있다.

 

// component/Header.js

import { ThemeContext } from '../context/ThemeContext'

const Header = () => {
   const {isDark, setIsDark} = useContext(ThemeContext)
   
   const toggleTheme = () => setIsDark(!isDark)
   return (
      <header style={{ backgroundColor: isDark ? 'black' : ' lightgray }}>
         <button onClick={toggleTheme}> DarkMode <button/>
      <header/>
   )
}

export default Header

 

 

context API의 단점

 context API의 단점은 context API를 사용하는 여러 개의 컴포넌트가 있을 때, 둘 중 하나의 context만 변경이 되어도 둘 다 렌더링이 된다는 점이다. 이는 애플리케이션의 규모가 커졌을 때 성능 이슈가 발생할 수 있다. 또 다른 단점은 Provider로 감싸줘야 하기 때문에 Provider hell을 야기할 수 있다는 점이다. 따라서 contextAPI는 간단한 전역 상태관리 정도에 사용하기 좋은 hook이라고 생각한다.

 

 

 

 

Reference

https://velog.io/@ckstn0777/Context-API%EC%9D%98-%EC%B5%9C%EB%8C%80-%EB%8B%A8%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

https://ko.legacy.reactjs.org/docs/context.html

https://www.youtube.com/watch?v=LwvXVEHS638&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=5