[WebDevCurriculum] Tab 핵심 logic

1. Tab은 하나만 선택할 수 있도록 구성

별도의 list나 array를 활용하며, class id와 함께 중복선택이 발생하지 않도록 한다.

• 이벤트 요소들에 대해 Event를 부여해준다.

for(let element of clickAreas){
			element.addEventListener('click', (e)=>clickEvent(e));
		}

• 별도 list 등을 활용하여 중복선택을 방지하고, event target에 대한 class toggle / classList.add(remove) 등을 통해 Event를 부여한다.

	function clickEvent(e) {
		//let contentTarget = document.querySelector(e.dataset.tabTarget);
		//ntentTarget.classList.add('.display')
		//initial state
		if(checkList.length == 0){
			checkList.push(e.target.id);
			e.target.classList.toggle('contentLine');
		//click itself
		}else if(checkList.length > 0 &&checkList.includes(e.target.id)){
			checkList.pop(e.target.id);
			e.target.classList.toggle('clickArea');
		//click others
		}else if(checkList.length > 0 && !(checkList.includes(e.target.id))){
			let previousObject = document.getElementById(checkList[0]);
			previousObject.classList.toggle('contentLine');
			e.target.classList.toggle('contentLine');

			checkList.pop();
			checkList.push(e.target.id);
			}
	};

2. tab, content는 layout/event는 별도로 구성

content는 tab의 하위 속성이 아닌, 별도의 content(section)으로 구성한다.

event는 동일한 Event(mouseclick 등)를 활용하되, tab event와는 별도의 logic으로 구성한다.

• tab/content 속성을 이어주는 data-tab-target/content를 활용한다.
  → data-tab-target : tab
  → data-tab-content : content

//tab attributes
		let connectTabstoContent = document.querySelectorAll('[data-tab-target]');
		let connectContentstoTabs = document.querySelectorAll('[data-tab-content]')

• tab속성에 click event를 부여한다.
• 이 tab속성의 tab.dataset.tabTarget 객체에 content가 저장되어 있다는 점을 활용한다.
  → 클릭시 모든 content를 가린다(add hidden).
  → tab target에 연결되어있는 tab content만 보여준다(remove hidden)

		//for content click event
		for(let tab of connectTabstoContent){
			tab.addEventListener('click', ()=>{
				//target = data-tab-content
				const target = document.querySelector(tab.dataset.tabTarget);
				for(let content of connectContentstoTabs){
					content.classList.add('display');
				}
				target.classList.remove('display');
			})
		}
	}

3. 유의사항

class를 활용할 경우, 내부적으로 사용하는 변수들은 모두 constructor(생성자)에서 먼저 선언이 되어 있어야 한다.

Tab에 연결되어있는 content에 접근할 수 있는 방법은 두가지를 사용할 수 있다.

• data-tab-target을 통한 연결
  → document.querySelectorAll('[data-tab-target]')을 통해 tab 연결
  → 위 요소 각각에 대해 element.dataset.tabTarget으로 연결된 content로의 접근 가능

• Element를 통한 연결
  → document.getElementById로 tab element 확보
  → 해당 요소에 대해 element.dataset.tabTarget으로 연결된 content로의 접근 가능