132. useContext 훅으로 컨텍스트에 탭핑(tapping)하기

내장함수인 useContext를 선언하고

내부에 AuthContext 컨텍스트에 포인터를 전달한다.

 

그리고 ctx 변수를 선언해 담으면 더 깔끔하게 코드를 작성할 수 있다!

import React, { useContext } from 'react';

import classes from './Navigation.module.css';
import AuthContext from '../store/auth-context';

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;