분류 전체보기15 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. 배경 애니메이션 적용된 Toggle Switch 만들기 1. input tag > checkbox 이용 w3school에 들어가면 'How to create a toggle switch'라는 글이 있습니다. 이 글에서 rounded버전과 rectangular 버전을 참고해 만들 수 있습니다. 라운드를 구현해봅시다! 예제와 달리 여기서 만들어볼 토글은 클릭하는 순간 배경색이 왼쪽부터 오른쪽 끝까지 채워지는 애니메이션 효과를 주기로 했어요. 토글 버튼과 별개로 배경처리를 해줘야 해서 span class를 2개 만들어줍니다. 2. CSS 1) ToggleInner CSS 기존의 input checkbox는 dipslay를 없애주고 기능만 남겨놓아야 합니다. label클래스로 버튼 모양을 잡고, toggleInner와 switch를 배치해줍니다. 가장 신경써야 하는.. 2023. 4. 16. 이전 1 2 3 4 다음
