코딩기록

✅ 오류상황search 아이콘 클릭시 부드럽게 close아이콘 + input 으로 변경이 안됨. 즉, transition 적용 안됨. {/* 🔽 input 토글 영역 */} {showInput && ( )} ✅ 문제 원인: w-0 → w-[240px] 애니메이션은 display 상태와 관련 있음{showInput && }처럼 조건부 렌더링으로 input 자체를 DOM에 아예 추가/제거하면,transition이 작동하기 전에 width가 없어져 버리기 때문에 애니메이션이 실행되지 않음. ✅ 해결 방법: input을 항상 렌더링하고, className으로만 숨기기 🔧 추가 포인트pointer-events-none: input이 w-0일 때 클릭 방지

const handleClick = useCallback(() => { console.log("clicked");}, []);const btnRef = useRef(null);이 한 줄은 리액트에서 DOM 요소를 직접 참조하기 위한 방법✅ useRef란?React의 훅 중 하나로, 컴포넌트가 리렌더링되어도 유지되는 값을 저장할 수 있음.보통 DOM 요소나 타이머 ID, 외부 라이브러리 인스턴스 등을 저장하는 데 쓰임.✅ 이 코드에서의 의미const btnRef = useRef(null);구성 요소 설명useRef()ref 객체 생성HTMLButtonElementref.current가 버튼 요소를 가리키도록 타입 지정null초기값: 아직 버튼이 화면에 나타나지 않았기 때문에 null즉, 이 코드는“버튼을..

상황: 써치버튼 클릭시 x, input 활성화됨 반대로 x 클릭시 써치버튼 활성화 안됨. 이유: Next.js의 컴포넌트는 최적화를 위해 내부적으로 이미지 캐싱을 강하게 적용, 그래서 src만 바꿔도 리렌더링이 안 될 수 있음. → 이렇게 하면 src는 바뀌었지만, Next.js가 내부적으로 같은 컴포넌트로 판단해서 업데이트를 생략함. 해결: key={showInput ? "close" : "search"} // 🔑 캐시 무효화용 코드 추가 key 값이 바뀌면 React는 이 컴포넌트를 새로운 컴포넌트로 인식하고 다시 렌더링함. 그래서 close ..