React, TS, Next.js 프로젝트) 트러블 슈팅 - button > Image 컴포넌트 토글

        상황:
          써치버튼 클릭시 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
    />