Notice
Recent Posts
Recent Comments
Link
반응형
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- 중복문자제거
- 레디스 확인
- 배엘에서 스왑
- 중복 문자열
- 제로베이스
- 아래로펼치기
- 문자열순서바꾸기
- 우분투 시간 변경
- sql 문자열 패턴 검색
- 객체의 밸류값만 찾기
- 코딩 어?
- ubuntu타임존
- 재귀스왑
- 5.3.8 Modifying Queries
- @Moditying @Query
- 중첩배열
- 단어 제거
- 깃 토큰 만료
- lastIndexOf()
- 문자열 중복
- 중첩배열평탄화
- 중복된 단어
- 시퀄 문법
- 프론트엔드 스쿨
- 스프링 데이타 JPA
- 중복단어제거
- ...점점점문법
- 객체의키값만 찾기
- indexOf()
- js 문자열을 문자배열로
Archives
- Today
- Total
코딩기록
React, TS, Next.js 프로젝트) 트러블 슈팅 - button > Image 컴포넌트 토글 본문
728x90
상황:
써치버튼 클릭시 x, input 활성화됨 반대로 x 클릭시 써치버튼 활성화 안됨.
이유: Next.js의 <Image /> 컴포넌트는 최적화를 위해 내부적으로 이미지 캐싱을 강하게 적용,
그래서 src만 바꿔도 리렌더링이 안 될 수 있음.
<Image src={search} /> → <Image src={close} />
이렇게 하면 src는 바뀌었지만, Next.js가 내부적으로 같은 컴포넌트로 판단해서 업데이트를 생략함.
해결:
key={showInput ? "close" : "search"} // 🔑 캐시 무효화용 코드 추가
key 값이 바뀌면 React는 이 컴포넌트를 새로운 컴포넌트로 인식하고 다시 렌더링함.
그래서 close → search 이미지 변경이 정상 반영됨.
[변경전]
<Image
src={showInput ? close : search}
alt={showInput ? "닫기" : "검색"}
className="w-10 h-10"
unoptimized
/>
[변경후]
<Image
key={showInput ? "close" : "search"} // 🔑 캐시 무효화용
src={showInput ? close : search}
alt={showInput ? "닫기" : "검색"}
className="w-10 h-10"
unoptimized
/>
반응형
'프론트 > 리액트' 카테고리의 다른 글
트러블슈팅 ) transition 적용 (2) | 2025.06.04 |
---|---|
리액트) 훅 useRef, useState, useEffect, useLayoutEffect, useCallback, useMemo 란? (1) | 2025.06.04 |
TS) interface와 type 의 차이 (0) | 2025.02.20 |
TS) 타입가드 Type Guard (0) | 2025.02.15 |
vscode로 리액트 타입스트립트 프로젝트 만들기1 - 셋팅 설정파일들 package.json, .eslintrc.js, tsconfig.json, prettierrc.js, reportWebVitals.ts (1) | 2025.02.07 |
Comments