inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

개인 프로젝트 질문입니다

해결된 질문

142

허성진

작성한 질문수 5

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;

express nodejs react redux Next.js

답변 1

0

제로초(조현영)

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

0

허성진

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;

0

허성진

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

 

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

0

제로초(조현영)

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

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

97

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

214

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

337

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1