Inflearn Community Q&A
asked
개인 프로젝트 질문입니다
Resolved
Written on
·
133
2
useCallBack이 두번 실행되는 이유를 모르겠습니다
1번쨰 메뉴탭을 클릭하면 1번 클릭값이 들어가는데
2번쨰 메뉴탭을 클릭하면 두번 클릭값이 들어갑니다
ex)
1번탭 클릭 true fasle
2번탭 클릭 fasle true fasle true
2클릭후 1번 클릭 true fasle
다시 2번 클릭 fasle true true fasle
import React, { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import style from '../styles/css/mainPage.module.css';
const MainLayout = ({ children }) => {
const [postCardOnClick, setPostCardOnClick] = useState(true);
const [upLoadCardOnClick, setUpLoadCardOnClick] = useState(false);
const PostOnClick = useCallback(() => {
if (postCardOnClick === false) {
setPostCardOnClick((prev) => !prev);
setUpLoadCardOnClick(false);
}
}, []);
const upLoadOnClick = useCallback(() => {
if (upLoadCardOnClick === false) {
setUpLoadCardOnClick((prev) => !prev);
setPostCardOnClick(false);
}
}, []);
console.log(postCardOnClick);
console.log(upLoadCardOnClick);
return (
<>
<div className={style.wrapper}>
<header id={style.header}>
<div className={style.maxWidth}>
<div className={style.logo}>
<h1></h1>
</div>
<nav id={style.gnb}>
<div>
<ul>
<li onClick={PostOnClick}>
<Link href="/">
{/* Postcard */}
<a>
{postCardOnClick ? (
<img src="/icon/home-w.svg" />
) : (
<img src="/icon/home-b.svg" />
)}
</a>
</Link>
</li>
<li onClick={upLoadOnClick}>
<Link href="/upload">
{/* UpLoad */}
<a>
{upLoadCardOnClick ? (
<img src="/icon/upLoad-w.svg" />
) : (
<img src="/icon/upLoad-b.svg" />
)}
</a>
</Link>
</li>
<li>
<Link href="">
{/* QrCode */}
<a>{false ? <img src="/icon/QR-w.svg" /> : <img src="/icon/QR-b.svg" />}</a>
</Link>
</li>
<li>
<Link href="">
{/* profile */}
<a>
<div style={{ borderRadius: '50%', background: 'gray' }}></div>
</a>
</Link>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div>{children}</div>
</div>
</>
);
};
export default MainLayout;
expressnodejsreactreduxNext.js
Answer 1
0
tjdwls75661827
Questioner
import React, { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import style from '../styles/css/mainPage.module.css';
const MainLayout = ({ children }) => {
const [postCardOnClick, setPostCardOnClick] = useState(true);
const [upLoadCardOnClick, setUpLoadCardOnClick] = useState(false);
console.log(postCardOnClick);
console.log(upLoadCardOnClick);
const PostOnClick = useCallback(() => {
if (postCardOnClick === false) {
setPostCardOnClick((prev) => !prev);
setUpLoadCardOnClick(false);
}
}, [postCardOnClick, upLoadCardOnClick]);
const upLoadOnClick = useCallback(() => {
if (upLoadCardOnClick === false) {
setUpLoadCardOnClick((prev) => !prev);
setPostCardOnClick(false);
}
}, [upLoadCardOnClick, upLoadCardOnClick]);
return (
<>
<div className={style.wrapper}>
<header id={style.header}>
<div className={style.maxWidth}>
<div className={style.logo}>
<h1></h1>
</div>
<nav id={style.gnb}>
<div>
<ul>
<li onClick={PostOnClick}>
<Link href="/">
{/* Postcard */}
<a>
{postCardOnClick ? (
<img src="/icon/home-w.svg" />
) : (
<img src="/icon/home-b.svg" />
)}
</a>
</Link>
</li>
<li onClick={upLoadOnClick}>
<Link href="/upload">
{/* UpLoad */}
<a>
{upLoadCardOnClick ? (
<img src="/icon/upLoad-w.svg" />
) : (
<img src="/icon/upLoad-b.svg" />
)}
</a>
</Link>
</li>
<li>
<Link href="">
{/* QrCode */}
<a>{false ? <img src="/icon/QR-w.svg" /> : <img src="/icon/QR-b.svg" />}</a>
</Link>
</li>
<li>
<Link href="">
{/* profile */}
<a>
<div style={{ borderRadius: '50%', background: 'gray' }}></div>
</a>
</Link>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div>{children}</div>
</div>
</>
);
};
export default MainLayout;
tjdwls75661827
Questioner
deps를 넣고도 1번 메뉴를 누르고 2번메뉴를 번갈아가면서 누르면 2번 실행되는오류가 같습니다..
화면은 바뀌는데 밑에 메누바가 바뀌지않습니다
zerocho
Instructor
뭐가 문제냐면요. Link로 다른 주소로 넘어가면서 다른 페이지로 넘어가게 되고 그 페이지의 MainLayout은 사라지고 다음 페이지의 MainLayout이 다시 불러와지고 있습니다. 그래서 state가 초기화됩니다. state를 리덕스에서 관리해야할것 같습니다.