Context API?

Context API란?

: Redux처럼 전역상태 관리를 해주는 라이브러리
데이터를 주고받기 위해서 매번 공통 부모 컴포넌트에서 props로 하위 컴포넌트에 전달하고,수정하고 ...반복하기엔 너무 비효율적이고 코드도 복잡해진다.
Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다.

Context API는 최상위 컴포넌트에 덮어 씌워준다는 느낌이며, 부분적으로도 컴포넌트로 입힐 수 있다.

로그인 기능을 구현해 보기 전에 Dark/light mode 개념으로 Context API를 살펴보자.웹페이지에서 Dark/light mode를 본 적이 있을 것이다.
보통 다크/라이트 모드는 모든 페이지에서 쓰이기에 전체적으로 덮어주면 된다.

1. DarkModeContext.jsx
   라는 파일을 생성하고, 다른 파일에서 불러 쓸 것이기에 다음과 같이 쓴다.

   export const DarkModeContext = createContext();

 
이렇게 context를 생성하고, 화면에 표시될 내용에 Context의 Provider를 감싼다. 


 2. setState설정
 
 
 export const DarkModeContextProvider=()=>{
       const [darkMode,setDarkMode]=useState(false);
     const toggleDarkMode =()=>{
        setDarkMode(prevState => !prevState); 
    }
}
 
 


prevState란 현재 상태값을 의미하며, 현재 darkMode값이 false면 true로!true면 false로 바뀐다! 

3. 컴포넌트 생성

 return(
         <DarkModeContext.Provider value={{darkMode,toggleDarkMode}}>
            
        </DarkModeContext.Provider>
    )

    


구조 분해 할당으로 darkMode와 toggleDarkMode를 value로 지정.


4. index.js(최상위 컴포넌트)에서 씌워주기
 
<DarkModeContextProvider>
   <App/>
</DarkModeContextProvider>

이렇게 Context API로 결계를 씌워주듯 설정하여 전역 상태에서 모든 페이지에 적용할 수 있도록 만들어 준 것이다!