인프런 커뮤니티 질문&답변

허성진

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

개인 프로젝트 질문입니다

해결된 질문

작성

135

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;

express nodejs react redux Next.js

답변 1

제로초(조현영)

지식공유자

useCallback의 deps 배열에 state들 deps 넣으세요.

허성진

질문자

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;

허성진

질문자

deps를 넣고도 1번 메뉴를 누르고 2번메뉴를 번갈아가면서 누르면 2번 실행되는오류가 같습니다..

화면은 바뀌는데 밑에 메누바가 바뀌지않습니다

제로초(조현영)

지식공유자

뭐가 문제냐면요. Link로 다른 주소로 넘어가면서 다른 페이지로 넘어가게 되고 그 페이지의 MainLayout은 사라지고 다음 페이지의 MainLayout이 다시 불러와지고 있습니다. 그래서 state가 초기화됩니다. state를 리덕스에서 관리해야할것 같습니다.

허성진

작성한 질문수

전체 Q&A

질문하기