이번 과제에서는 지금까지 배웠던 내용들을 토대로
Modal, Toggle, Tab, Tag UI을 구현해보았다.
🖥️ Modal 컴포넌트
Modal 컴포넌트에서 핵심은 새로운 창이 아니라, 레이어를 깔아야한다.
먼저, useState를 사용하여 isOpen 상태를 만들어주어,
모달창이 켜진상태와 꺼진상태의 상태를 만들어준다.
그리고, openModalHandler 함수를 통하여 함수가 호출되어 실행되면,
모달창의 켜짐여부인 isOpen의 상태가 바뀌게 만들어주었다.
ModalBackdrop과 ModalView의 부모 컨포넌트인 ModalBtn에 이벤트 핸들러를 주어
자식 컴포넌트에도 같은 핸들러가 작동이 되기때문에
자식 컴포넌트에서는 작동이 되지않게 하기위해
해당 이벤트 핸들러 e에 stopPropagation()을 해주어,
ModalView 바깥의 배경을 클릭하면 모달창이 꺼지지만,
ModalView에 stopPropagation()을 주었기 때문에 ModalView 내부를 클릭해도
아무런 일도 일어나지않는다.
이건 이벤트버블링을 검색해보면 더 자세히 알 수 있다.
🕹️ Toggle 컴포넌트
Toggle UI는 두가지 상태만을 가지고 있는 스위치.
Modal 컴포넌트와 마찬가지로
isOn이라는 상태를 주어 불리언값으로
토글버튼이 On일때 true, Off일때 false가 되게 주었다.
toggleHandler 함수를 선언해주어
상태변경함수(setisOn)을 통해 isOn의 상태를
true -> false 또는 false -> true로 바꿔주는 함수를 만들었다.
두개의 div 엘리먼트에
toggle-container, toggle-circle 각각 클래스를 지정해주고
삼항연산자를 통해,
isOn이 true가 되었을때, toggle--checked 클래스를
각각 toggle-container와 toggle-circle 의 클래스를 가지고있는 div 엘리먼트에
추가해주고,
isOn이 false가 되면, toggle--checked 클래스를 추가하지않는다.
이렇게 함으로써, css작업시 checked될때는 버튼이 오른쪽으로
움직일 수 있게끔 해줄 수 있고, 색의 변화도 줄 수 있었다.
📒 Tab 컴포넌트
Tab 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할때 사용
currentTab 상태를 주어 탭이 1,2,3 이동할수 있게 해주었다.
selectMenuHandler함수가 호출될때
setCurrentTab 변경함수에(index) 매개변수를 주어
현재 선택한 탭의 인덱스 값을 전달해주었다.
위에서 변수로 선언해준 menuArr을 map메서드를 통해
매개변수로 el, index 를 주어
menuArr를 돌면서 li태그를 통해 리스트를 만들었다
li 하나하나의 클래스이름을 현재의 탭위치와
매개변수로 받은 index와 똑같다면 submenu focused,
다르다면 submenu를 주었다.
그러고 그 li태그를 클릭하면, selectMenuHandler()메서드에
index를 매개변수로 주어 함수를 호출하고, li태그 textContent로
el.name을 주어 Tab1, Tab2, Tab3을 변경해가며 줄수 있게 해주었다.
📌 Tag 컴포넌트
Tag 컴포넌트는 레이블 지정을 통해 구성이나 분류에
도움이 되는 키워드 집합을 만들때 자주 사용
tags 상태를 주고,
삭제하는 메서드를 처음 tags상태에 filter메서드로
지우려고하는 tag를 제외한 나머지 tag들을
setTags 상태변경함수를 통하여 렌더링시켜주면 된다.
input창에 값을 입력하고, Enter를 입력해야하고,
빈값이나 이미 있는 값을 입력하고 Enter를 치면 입력이 되지 않아야함.
따라서 이벤트의키를 'Enter'로 주고, tags에 지금 새로 만드려는 태그가
포함되어 있지 않아야하고, 빈칸이지 않아야한다.
위의 조건들이 충족되면 setTags 상태변경함수를 통해 tags들이 있는 배열에
새로 만든 태그를 추가한 상태로 재렌더링이 된다.
마지막으로 태그삭제 버튼에 클릭이벤트를 주어
위에서 선언했던 removeTags에 index매개변수를 넘겨준다.
