리액트 Context ,리액트 컨텍스트의 한계

 

리액트 Context란?

 

리액트 내부 state 저장소를 이용해서 부모를 통해 데이터를 전달하지 않으면서 저장소에서 액션을 트리거해서 관련된 컴포넌트에 직접 전달 할 수 있다. 

 

props로 모든 데이터를 자식에게 넘겨주기에는 너무 복잡할 것 같을 때 쓴다. 

 

1. components 파일 안에 store라는 폴더를 만들고 아래 함수를 써주고 꼭 export 해주기

//전역 state에 대해 여러 개의 컨텍스트를 가질 수 있다. 물론 한개도 가능
import react from "react";

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

export default AuthContext;

 

2. 공급하기 = 컨텍스트를 활용할 수 있어야 하는 모든 컴포넌트를 JSX 코드로 감싸기

 

참고!! 컨텍스트 자체는 컴포넌트가 되지 않는다. 그래서 

<컨텍스트명.Provider> 로 감싸주기

 

//App.js

return (
    //<React.Fragment>
    <AuthContext.Provider>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
    //</React.Fragment>
  );

 

 

👉 안에 있는 모든 자식 컴포넌트들이 해당 컨텍스트에 접근할 수 있다. 

 

3. 리스팅하기 // 소비하기

 

방법 1 (복잡해서 잘 안쓸 것 같음)

사용자가 인증되었는지 여부를 알고 싶다고 할 때, 해당 컨텍스트가 필요한 모든 것을 그 소비자로 감싸준다. 

그리고 아래에 {(ctx)=>{ }} 함수를 써주고, return 으로 모두 감싸준다. 

 

//Nav.js

import React from "react";
import AuthContext from "../store/auth-context";

import classes from "./Navigation.module.css";

const Navigation = (props) => {
  return (
    <AuthContext.Consumer>
      {(ctx) => {
        return (
          <nav className={classes.nav}>
            <ul>
              {ctx.isLoggedIn && (
                <li>
                  <a href='/'>Users</a>
                </li>
              )}
              {props.isLoggedIn && (
                <li>
                  <a href='/'>Admin</a>
                </li>
              )}
              {props.isLoggedIn && (
                <li>
                  <button onClick={props.onLogout}>Logout</button>
                </li>
              )}
            </ul>
          </nav>
        );
      }}
    </AuthContext.Consumer>
  );
};

export default Navigation;

App.js 에서 value 값으로 컨텍스트 내용 넣어주기

// App.js

return (
    //<React.Fragment>
    <AuthContext.Provider
      value={{
        isLoggedIn: false,
      }}
    >
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
    //</React.Fragment>
  );

 

 

⭐️공급자 부분에서 value를 state 명과 같이 써준다.

그러면 이 value 객체는 isLoggedIn이 변경될 때마다 리액트에 의해 업데이트 된다.

그리고 그 새로운 객체, 그 새로운 컨텍스트 객체는 모든 리스닝 컴포넌트로 전달된다.  

 

=> props를 사용할 필요 없음

return (
    //<React.Fragment>
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn, // 이렇게 하면 이 value 객체는 isLoggedIn이 변경될 때마다 리액트에 의해 업데이트 된다.
      }}
    >
      <MainHeader /* isAuthenticated={isLoggedIn} */ onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
    //</React.Fragment>
  );
}

export default App;

 

 

 

---

3. 리스팅하기 // 소비하기

 

⭐️방법 2.⭐️

useContext 훅 사용하기 = 컨텍스트를 사용할 수 있게 해주고, 컨텍스트를 활용하고 리스닝할 수 있게 한다. 

앱 전체 또는 컴포넌트 전체 state에는 적합하지만, 컴포넌트 구성을 대체할 수는 없다. 

ex) <Button> 은 컴포넌트 별로 다른 기능을 수행하기 때문에 컨텍스트가 아닌 props를 사용해야 한다. 

 

컴포넌트 안에 useContext() 를 넣고, 사용하려는 컨텍스트를 가리키는  포인터를 넣는다. 

 

import React, { useContext } from "react";
import AuthContext from "../store/auth-context";

import classes from "./Navigation.module.css";

const Navigation = (props) => {
  const ctx = useContext(AuthContext);
  return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href='/'>Users</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <a href='/'>Admin</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <button onClick={props.onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Navigation;

 

---

컴포넌트 뿐만 아니라 함수에도 데이터를 전달하도록 동적 컨텍스트 설정하기

<AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn, // 이렇게 하면 이 value 객체는 isLoggedIn이 변경될 때마다 리액트에 의해 업데이트 된다.
        onLogout: logoutHandler,
      }}
    >

이런식으로 props를 안쓰고 함수로 내려줄 수 있다. 

 

 

---

더 리팩토링 해보기

 

auth-context.js

 

//auth-context.js
//전역 state에 대해 여러 개의 컨텍스트를 가질 수 있다. 물론 한개도 가능
import React, { useState, useEffect } from "react";

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

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

  const loginHandler = () => {
    localStorage.setItem("isLoggedIn", "1"); // setItem은 브라우저에서 사용할 수 있는 전역 객체이다. 여기에 아무 식별자를 넣을 수 있다. 로그인했다 1, 안했다 0
    setIsLoggedIn(true);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn, // 이렇게 하면 이 value 객체는 isLoggedIn이 변경될 때마다 리액트에 의해 업데이트 된다.
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

 

index.js

//index.js
import React from "react";
import ReactDOM from "react-dom";

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

ReactDOM.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>,
  document.getElementById("root")
);

 

App.js

//App.js

import React, { useContext } from "react";

import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import MainHeader from "./components/MainHeader/MainHeader";
import AuthContext from "./components/store/auth-context";

function App() {
  const ctx = useContext(AuthContext);

  return (
    <React.Fragment>
      <MainHeader />
      <main>
        {!ctx.isLoggedIn && <Login />}
        {ctx.isLoggedIn && <Home />}
      </main>
    </React.Fragment>
  );
}

export default App;

 

MainHeader.js

// MainHeader.js

import React from "react";

import Navigation from "./Navigation";
import classes from "./MainHeader.module.css";

const MainHeader = (props) => {
  return (
    <header className={classes["main-header"]}>
      <h1>A Typical Page</h1>
      <Navigation onLogout={props.onLogout} />
    </header>
  );
};

export default MainHeader;

 

Navigation.js

// Navigation.js

import React, { useContext } from "react";
import AuthContext from "../store/auth-context";

import classes from "./Navigation.module.css";

const Navigation = () => {
  const ctx = useContext(AuthContext);
  return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href='/'>Users</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <a href='/'>Admin</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <button onClick={ctx.onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Navigation;

 

Home.js

// Home.js

import React, { useContext } from "react";
import AuthContext from "../store/auth-context";
import Button from "../UI/Button/Button";

import Card from "../UI/Card/Card";
import classes from "./Home.module.css";

const Home = () => {
  const authCtx = useContext(AuthContext);
  return (
    <Card className={classes.home}>
      <h1>Welcome back!</h1>
      <Button onClick={authCtx.onLogout}>Logout</Button>
    </Card>
  );
};

export default Home;

 

Login.js

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

import Card from "../UI/Card/Card";
import classes from "./Login.module.css";
import Button from "../UI/Button/Button";
import AuthContext from "../store/auth-context";

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.includes("@") }; // "USER_INPUT" 액션을 받을 때마다 여기서 value와 isValid를 모두 업데이트하는 것이다.
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.includes("@") };
  }
  return { value: "", isValid: false };
};

const passwordReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.trim().length > 6 }; // "USER_INPUT" 액션을 받을 때마다 여기서 value와 isValid를 모두 업데이트하는 것이다.
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.trim().length > 6 };
  }
  return { value: "", isValid: false };
};

// 리듀서 함수는 컴포넌트 함수 밖에 만듬. 왜냐면 리듀서 함수 내부에서는 컴포넌트 함수 내부에서 만들어진 어떤 데이터로 필요하지 않기 때문이다.
// 리듀서 함수 내부에서 요청되고 사용되는 모든 데이터는 리액트가 이 함수를 실행할 때 자동으로 이 함수로 전달된다.

const Login = () => {
  // const [enteredEmail, setEnteredEmail] = useState('');
  // const [emailIsValid, setEmailIsValid] = useState();
  // const [enteredPassword, setEnteredPassword] = useState("");
  // const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: "",
    isValid: null,
  });

  const [passwordState, dispatchPassword] = useReducer(passwordReducer, {
    value: "",
    isValid: null,
  });

  const authCtx = useContext(AuthContext);

  useEffect(() => {
    console.log("EFFECT RUNNING");

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);

  const { isValid: emailIsValid } = emailState;
  const { isValid: passwordIsValid } = passwordState;
  //객체 디스트럭처링
  //값 할당이 아니라 별칭 할당이다.
  //useEffect를 더욱 최적화하고 이펙트가 불필요하게 실행되는 것을 피한다.

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]); // 2. 이렇게 바꾸면 값만 변경되고 유효성은 변경되지 않으면 이 이펙트는 다시 실행되지 않는다. (일단 비밀번호가 유효하면 더 타이핑해도 콘솔창에 더 안나타난다. )

  // }, [emailState, passwordState]); // 1. 의존성은 emailState, passwordState 전체이지 유효성 부분이 아니다.

  //여기서 setFormIsValid()를 재평가하고 유효성 검사 state 설정 함수를 다시 실행해야 한다. 이메일 및 비밀번호 변경 핸들러의 모든 키 입력에 대해서!
  //setTimeout 함수를 사용해서 500밀리초 후에만 이 작업 (유효성 검사)을 수행한다.

  const emailChangeHandler = (event) => {
    dispatchEmail({ type: "USER_INPUT", val: event.target.value });

    // setFormIsValid(event.target.value.includes("@") && passwordState.isValid);
  };

  const passwordChangeHandler = (event) => {
    // setEnteredPassword(event.target.value);
    dispatchPassword({ type: "USER_INPUT", val: event.target.value });

    //setFormIsValid(enteredEmail.includes("@") && event.target.value.trim().length > 6)
    //setFormIsValid(emailState.value.includes("@") && event.target.value.trim().length > 6)
    // useReducer를 썼기 때문에 입력된 값을 저장할 것이기 때문에 emailState.value라고 씀

    // setFormIsValid(emailState.isValid && event.target.value.trim().length > 6);
    // isValid 필드가 있어서 재검증 하는 대신 emailState.isValid가 true인지 확인 할 수 있다.
  };

  const validateEmailHandler = () => {
    dispatchEmail({ type: "INPUT_BLUR" }); // 여기서는 인풋이 포커스를 잃었다는 것만 중요하기 때문에 추가해야하는 데이터가 없다.
  };

  const validatePasswordHandler = () => {
    dispatchPassword({ type: "INPUT_BLUR" });
  };

  const submitHandler = (event) => {
    event.preventDefault();
    authCtx.onLogin(emailState.value, passwordState.value);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            emailState.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor='email'>E-Mail</label>
          <input
            type='email'
            id='email'
            value={emailState.value}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            passwordState.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor='password'>Password</label>
          <input
            type='password'
            id='password'
            value={passwordState.value}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button type='submit' className={classes.btn} disabled={!formIsValid}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default Login;

 

 

---

리액트 컨텍스트의 한계

변경이 잦은 경우에는 그다지 좋은 방법이 아니다. (ex) 1초마다 바뀜)

 

그렇다면 앱 전체에 걸쳐 또는 컴포넌트 전체에 걸쳐 state가 자주 변경되는 경우에는 어떻게 해야할까?

=> 리덕스가 있다!!

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓