React/Example3 React - Input 자동완성(Auto Completing) 기능 만들기 1. 만들고 싶은 기능 정리하기 auto completing은 검색기능을 만들 때 필수적으로 구현해야 하는 기능입니다. 알파벳을 하나 이상 input에 입력하면 그 입력값으로 시작하는 추천 검색어가 랜더링돼 user에게 보여지는 것이 핵심입니다. 입력 알파벳이 하나 이상이면 suggestion list 랜더링하기 입력 알파벳이 하나 이상이면 clear button이 보이도록 하기 suggestion을 클릭하면 그 값을 input value로 세팅하기 input에 알파벳을 입력 후 suggestion을 클릭하지 않은 상태에서, input과 suggestion 외부에서 클릭이벤트가 발생했을 때 4-1. suggestion list가 닫히도록 하기 4-2. input값은 입력값 그대로 남아 있게 하기 clea.. 2023. 4. 16. React - Input 값을 Tag로 만들기 티스토리에도 글쓰기를 할 때 태그를 입력할 수 있는 부분이 있습니다. 태그를 입력하고 엔터를 치면 태그가 등록되고 곧장 다음 태그를 입력할 수 있도록 커서가 이동하죠. 비슷한 기능을 하는 Tag 생성 Input입니다. 1. Tag component 짧은 키워드를 담는 tag component를 먼저 만들어줍니다. 부모컴포넌트로부터 prop을 전달받아 렌더링 할 예정입니다. 생성은 부모 컴포넌트에서 담당하지만 삭제는 tag 내에 있어야겠죠. deleteTag함수도 prop으로 넘겨 받도록 합니다. const onDeleteTag = () => { onDelete(tag); }; return ( {tag.text} x ) 2. Input component tag를 추가하는 건 todolist를 만드는 것과 .. 2023. 4. 16. React - Modal만들기(이벤트 버블링 차단) 알림창을 띄울 때, 로그인 등 입력값을 받아야할 때 등 여러 상황에서 자주 쓰이는 모달을 구현해보고자 합니다. 1. modal component 'open modal' 버튼에 onClick 이벤트를 적용하고, 버튼을 클릭하면 showModal 값이 true로 바뀌도록 상태관리를 해줍니다. showModal이 true가 되면 Modal이 등장하겠죠? const [showModal, setShowModal] = useState(false); const onShowModal = () => { setShowModal(true); }; const onHideModal = () => { setShowModal(false); }; return ( Open Modal {showModal && x HELLO WORLD .. 2023. 4. 16. 이전 1 다음
