# 131 [udemy React 완벽 가이드 노트] 동적인 context : 다른 컴포넌트에 함수 전달하기

<AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
      }}
    >

이렇게 하면 모든 AuthContext.Provider를 리스닝하는 모든 컴포넌트

(AuthContext.Provider에 감싸여져 있는 컴포넌트들)는 

   logoutHandler를 onLogout 컨텍스트 값을 통해 사용할 수 있게 된다. 

 

그러나 Home컴포넌트의 Button컴포넌트에서는 다르다. 

 

 

      <Button onClick={props.onLogout}>Logout</Button>

이것은 순수히 프레젠테이션 컴포넌트이기 때문에 

버튼 클릭을 onLogout에 바인딩 하기 위해 

버튼 내부에 컨텍스트를 사용하는 것은 옳지 않다. 

그렇게 해버린다면 버튼 컴포넌트가 오로지 onLogout 기능만 할 수 있게 되기 때문이다. 

 

 

---

***데이터를 전달하는 방식***

(1) 대부분은 프롭을 사용하여 컴포넌트에 데이터를 전달한다.

(프롭은 컴포넌트를 구성하고 그걸 재사용할 수 있도록 하는 매커니즘이기 때문)

 

(2) 예외의 경우 useContext 를 사용한다.

많은 컴포넌트를 통해 전달하고자 하는 것이 있는 경우,

혹은 특징적인 일 (사용자 로그아웃)을 컴포넌트로 전달하는 경우 (로그아웃 컴포넌트)

 

 

 

 

 

작은 팁 : Default 컨텍스트에 함수 추가하기

---

 

auth-context.js 파일 

 

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

 

 

onLogout 프롭을 빈 함수로 넣어준다. 

(이렇게 하지 않으면 Navigation.js파일에서

IDE가 onLogout프롭이 있는지 모르기 때문에 추천해 주지 않기 때문이다 

간단한 팁)

 

 

auth-context.js 에 AuthContextProvider 컴포넌트 추가하기

---

 

export const AuthContextProvider = props => {
  return <AuthContext.Provider>{props.children}</AuthContext.Provider>;
};

 

 

 

이렇게 하는 이유는 

auth-context.js 파일 내부로 useState를 import하기 위해서다. 

 

전체 인증 state를 별도의 Provider 컴포넌트에서 관리하는 것이다. 

 

 

 

 

이제 App.js는 깨끗해졌고, 

 

import React from "react";

import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import MainHeader from "./components/MainHeader/MainHeader";

function App() {
  return (
    <>
      <MainHeader/>
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </>
  );
}

export default App;

 

 

index.js 파일에서 

 

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";
import App from "./App";
import { AuthContextProvider } from "./components/context/auth-context";

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

다음과 같이 AuthContextProvider로 App컴포넌트를 감싸주어야 한다. 

 

그러면 아까같이 모든 컴포넌트에서 Context를 사용할 수 있게 되었다. 

 

이 방식을 개발자들이 선호하는 편인데, App.js파일이 원래의 일에 

집중할 수 있게 되었고, 

auth-context.js 파일에서 모든 state를 관리할 수 있기 때문이다. 

한 파일에서 주로 한가지 일만 하는 것이 유지보수 하기 편하기 때문에 

주로 선호하는 방식이다. 

 

 

 

reactContext 사용할 때 주의사항

---

많이 변경되는 경우에는 reactContext는 적합하지 않다. 

(1초에 여러번 state가 변경되는 경우)

최적화 되어있지 않기 때문이다. 

 

그럴 때는 리덕스를 사용한다(나중에 배울 예정)

 

모든 것을 컨텍스트로 교체하지 말고 

대부분은 프롭을 사용해야 한다. 

프롭체인을 변경하려고 하는 경우에만 컨텍스트로 변경하도록 하자.