웹/React (2) 썸네일형 리스트형 setTimeout을 취소할 때 useRef를 쓰는 이유 일정 시간이 지나고 나서야 어떤 행동을 수행하도록 할 때 setTimeout을 쓰게 됩니다. 다만 모종의 이유로 그 행동이 취소됐을 때에는 그 id를 가지고 설정된 timeout을 해제해야 하는데, 그 id를 저장하는데 에 useRef가 쓰입니다. const DelayedHoverMenu: React.FC = () => { const [showMenu, setShowMenu] = useState(false); const hoverTimer = useRef(null); const handleMouseEnter = () => { hoverTimer.current = window.setTimeout(() => { setShowMenu(true); }, 300); }; const handleMouseLeave .. Context Context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이 값을 공유하게 할 수 있습니다. 언제 Context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적인 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해.. 이전 1 다음