React 로그인시 setState를 true로 바꾸는 로직을 구현하고 싶습니다.

Question

App.js import "./App.css"; import React, { useState, useEffect } from "react"; import { Link, Route } from "react-router-dom"; import LandingPage from "./Component/Pages/LandingPage/LandingPage"; import LoginPage from "./Component/Pages/MemberPage/LoginPage"; import SignupPage from "./Component/Pages/MemberPage/SignupPage"; import SchedulePage from "./Component/Pages/Schedule/SchedulePage"; import NextLandingPage from "./Component/Pages/LandingPage/NextLandingPage"; import logoutIcon from "./image/icon-logout.svg"; import homeIcon from "./image/icon-main.svg"; import scheduleIcon from "./image/icon-check-last-schedule.svg"; import Auth from "./hoc/auth"; import { BrowserRouter as Router, Switch } from "react-router-dom"; import "./mediaquery.css"; import Menu from "@material-ui/core/Menu"; import MenuItem from "@material-ui/core/MenuItem"; import axios from "axios"; import { withRouter } from "react-router-dom"; import { siteTitle } from "./Component/Config"; const { Kakao } = window; function App(props) { useEffect(() => { console.log(isLogin); document.title = siteTitle; }) const buttonActive = (event) => { let menuList = document.querySelectorAll("#menu li"); menuList.forEach((value, index, array) => { array[index].classList.remove("active"); }); event.currentTarget.classList.add("active"); }; const [isLogin, setIsLogin] = useState(false); // 로그인을 했는지 여부 const [anchorEl, setAnchorEl] = useState(null); const switchIsLogin = (event) => { setIsLogin(event); } const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { console.log("handleClose true"); setAnchorEl(null); }; const onClickHandler = () => { axios.get(`/api/users/logout`).then((response) => { if (response.data.success) { props.history.push("/login"); } else { alert("로그아웃 실패"); } }); }; const logoutWithKakao = () => { if (Kakao.Auth.getAccessToken()) { console.log( "카카오 인증 액세스 토큰이 존재합니다.", Kakao.Auth.getAccessToken() ); Kakao.Auth.logout(() => { console.log("로그아웃되었습니다.", Kakao.Auth.getAccessToken()); setIsLogin(false); localStorage.clear(); props.history.push("/login"); }); } }; return (

); } export default withRouter(App); Auth.js import React, { useEffect } from "react"; import Axios from "axios"; import { useDispatch } from "react-redux"; import { auth } from "../_actions/user_action"; export default function (SpecificComponent, option, adminRoute = null) { // null -> 아무나 출입이 가능한 페이지 // true -> 로그인한 유저만 출입이 가능한 페이지 // false -> 로그인한 유저는 출입 불가능한 페이지 function AuthenticationCheck(props) { const dispatch = useDispatch(); useEffect(() => { dispatch(auth()).then((response) => { console.log(response); // 로그인하지 않은 상태 if (!response.payload.isAuth) { if (option) props.history.push("/login"); } else { // 로그인한 상태 if (adminRoute && !response.payload.isAdmin) { props.history.push("/"); } else { if (!option) props.history.push("/"); } } }); }, []); return ; } return AuthenticationCheck; } 안녕하세요. auth.js에서 App.js에 있는 isLogin을 바꾸는 작업을 하고 있습니다. App.js에서 주석으로 로그인시, 비로그인시라고 표기 되어 있는 부분을 동작하게끔 해야하는데 자식 컴포넌트인 auth.js에서 부모인 App.js의 SetIsLogin을 사용해야 하는 상황입니다. 다만, 이 것을 어떻게 해줘야할지 감이 안와서 질문 드립니다. 구글에 "자식 컴포넌트에서 부모 컴포넌트로 값 전달" 이런식으로 검색해서 나오는대로 여러 방법을 시도해봤는데 계속 오류가 뜨네요..

Moon4368 · Answer

기억이 애매하긴한데부모 컴포넌트에서 setState 사용하는 함수 만들고 자식 컴포넌트에 props로 물려주면 되는걸로 기억하고 있습니다. 자식에서 props로 받은 함수를 이벤트 걸면 되구요

데버 · Answer

&#64;Moon4368 이미 부모에서 자식으로 props 넘겨주는건 시도해봤지만 잘 안되네요…ㅠㅠ 어쨌든 답변 감사합니다. 검색을 좀 더 해봐야겠네요

React 로그인시 setState를 true로 바꾸는 로직을 구현하고 싶습니다.

2개의 답변

Q&A 목록