현인

검색 모달을 구현 중에 다음과 같은 요구사항이 주어졌다."모달 창이 열릴 때 검색 창에 자동으로 포커싱 되게 해주세요."Ref로 Input Element를 참조하고 useEffect를 통해 초기 렌더링시 focus를 주면 될 것 같았다. 따라서 다음과 같이 코드를 작성했다useEffect(() => { if (inputRef.current) { if (searchModalOpen) { inputRef.current.focus(); } } }, [searchModalOpen]);모달 창이 열리고, input에 focus가 잡혔다. 하지만 문제가 있었다. 모달 창을 닫고 다시 열면 focus가 잡히지 않았다. 무엇을 놓치고 있었을까 고민이 들었다. 스스로 유추한 문..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다. useEffect 적용 예시 useState 글에서 만들었던 Info 컴포넌트에 useEffect를 한 번 적용해 보겠습니다. import React, {..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useState uesState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. useState 활용 예제 useState 훅을 사용한 숫자 카운터 예제를 보겠습니다. import { useState } from 'react' const Counter = () => { const [value, setValu..