useContext + Context API

useContext + Context API

일반적으로 클라이언트 상태관리 라이브러리 혹은 context API를 사용하지 않는한 props는 부모 컴포넌트에서 하위 컴포넌트에게 단계를 거쳐서 내려줘야 한다. 아래와 같이 2~3단계라면 뭐 그냥 넘어갈 수도 있겠지만,

이정도 규모이상의 프로젝트가 되면 props를 일일히 내려주는게 번거로워진다. 내려주는 것 뿐 아니라, 유지보수할 일이 생기면 저 prop를 사용하는 컴포넌트를 일일히 다 고쳐줘야한다는 수고스러움도 있다.

 

Context API는 일일히 props를 전달하지 않아도 필요한 곳에서만 사용할 수 있도록, 해준다.

하지만 다음과 같은 문제때문에 남발하는 것은 좋지않다.

• Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다.
  • -> context에 의존하는 컴포넌트이므로 일반적인 방법으로는 재사용이 어려워질 수 있기때문
• Prop drilling을 피하기 위한 목적이라면 Component Composition을 먼저 고려해도 된다.

// LoginPage.jsx
import { useState } from 'react';
import PanelPage from './PanelPage';
import ProfilePage from './ProfilePage';
export default function LoginPage() {
 const [login, setLogin] = useState({ username: 'admin123', password: '12345' });
// …
return (
 <PanelPage>
 <ProfilePage login={login} />
 </PanelPage>
 );
}

계층적으로는 PanelPage가 ProfilePage의 부모 컴포넌트임에도 props를 전달하지 않고 자식 컴포넌트가 직접 props를 받고 있다.

---

useContext + Context API 사용단계 3가지

1. context 생성

import { createContext } from 'react';

export const ThemeContext = createContext(null); //createContext의 인자는 초기값임

 

2.  생성한 context를 사용하고싶은곳에 프로바이더로 제공

import { Themecontext } from './context/Themecontext';

export default function App() {
const [ispark, setIspark] = usestate(false):
return (
	<Themecontext.Provider value={{ isdark, setIsDark }}>
		<Page />
	</ThemeContext.Provider>
    );
}

• 이때의 value는 프로바이더 하위내에서 사용할 수 있는 값, 혹은 set함수등등을 의미

 

3. context 이용

import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const Header = () => {
	const { isDark } = useContext(ThemeContext);
    
    return (
    	<header
        	className="header"
            style={{
            	backgorund: isDark ? 'black' : 'lightgray'.
                color: isDark ? 'white' : 'black',
             }}
         >
     )
   }