React6 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 2 다음
