[React] useContext를 이용해 전역 props전달하기 2 (context.js로 분리시키기)

안녕하세요, 피터팬입니다!

오늘은 useContext를 이용하여 전역 props를 전달할 건데요

https://peter-coding.tistory.com/218

[React] useContext를 이용해 전역 props전달하기

위에서는 App.js에 data를 만들어, data를 App에서 전달하였습니다.

이번에는 index.js에서 App Component를 AuthContextProvider로 둘러싸, App.js에서는 오로지 App내용만 담을 수 있게 해보겠습니다.

 

예시

# index.js

import { AuthContextProvider } from "./store/auth-context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>
);

default가 아닌 AuthContextProvider를 auth-context로부터 import하였습니다. 그리고 App을 둘러쌓았습니다.

 

# App.js

import { useContext } from "react";
function App() {
    <React.Fragment>
    	~
    </React.Fragment>
}

여기서 React.Fragment.는 요소이름이 없는 태그로, useContext와는 무관한 태그입니다.

 

그렇다면, 이번에는 App Component를 둘러싼 AuthContextProvider Component를 살펴보겠습니다.

# auto-context.js

import React, { useState, useEffect } from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: (email, password) => {},
});

export const AuthContextProvider = (props) => {
  const [state, setState] = useState(0);
  const increaseState = () => {
    setState((previousState) => {
    	previousState+1
    });
  };
  const decreaseState = () => {
    setState((previousState) => {
    	previousState-1
    });
  };

  return (
    <AuthContext.Provider
      value={{
      // 위에서 선언한 세 변수를 value객체로 넘겨주기
        state:state,
        increaseState:increaseState,
        decreaseState:decreaseState,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

일반 import 한 AuthContextProvider와 default import 한 AuthContext가 있습니다.

1. AuthContextProvider는 index.js에서 App Component를 둘러싸기 위해 사용하였습니다.

10~20 : 전역으로 전달할 변수들(state,increaseState,decreaseState)을 선언하였습니다.

24~29 : 위에서 선언한 변수들을 value로 전달하였습니다.

31 : return에서, 열린 태그 내에 App Component가 올 것이기에 {props.children}을 넣어주었습니다.

 

2. AuthContext는 context를 전달받을 때 사용할 것입니다.

4~6 : createContext를 이용해 전달할 변수들을 선언해주었습니다.

 

아래는 전달한 context를 사용하는 코드입니다.

import { useContext } from 'react';
import AuthContext from './store/auth-context';

const Home = () => {
	const ctx = useContext(AuthContext);
	return (
    	<div>
        	<label>{ctx.state}</label>
            <button onClick={ctx.increaseState}>Click!</button>
        </div>
    )
}

1. useContext를 import해줍니다.

2. AuthContext Component를 import해줍니다.

3. 변수에 useContext()를 선언해줍니다.

4. 객체처럼 사용합니다.

 

---

Reference

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React