2024. 06. 12 (수) 7주차 - Daily Coding - Day03

// 주말 복습 필수!!

 

 

 

42강

이벤트 버블링

이벤트 캡처링

 

브라우저의 이벤트 순서

이벤트(예시 - 클릭) -> 이벤트 리스너(감지) -> 이벤트 핸들러(로직 실행)

 

1. 이벤트 캡처링

 - 이벤트 실행이 어디서 일어나는지 찾아가는 거

 

2. 이벤트 타겟팅

- 발생 이벤트에 가서 이벤트 핸들러 확인

 

 

3. 이벤트 버블링

- 타겟한 이벤트가 실행되고 다시 위로 올라가서 확인한다

 

function App() {
	if(!document.getElementById("eventCapture")) return null;
    
    document.getElementById("eventCapture").addEventListener("click"),
    () => console.log('div event capture'), true
    );
    
    return(
    	<section onClick = {() => console.log('section click)}>
        	<div id='eventCapture' onClick={() => console.log('div click')}>
            	<button onClick={()=> console.log('button click')>
                	클릭
                </button>
            </div>
        </section>
   );
  };
  
  
  // 콘솔에서 나오는 결과 화면
  // 1. div event capture
  // 2. button clikc
  // 3. div click
  // 4. section click

이벤트 버블링과 캡처링

 

 

이벤트 버블링 막는 법

 

모달창

=> 이벤트 버블링을 막았기 때문에 모달창의 빈 곳을 클릭해도 창이 꺼지지 않는거임.

=> event.stopPropagation() 메서드를 사용한다

function App() {
    return(
    	<section onClick = {() => console.log('section click)}>
        	<div onClick={(event) => 
            		event.stopPropagation();
            		console.log('div click'
             	)}
              >
            	<button onClick={()=> console.log('button click')>
                	클릭
                </button>
            </div>
        </section>
   );
  };
  
  
  // 콘솔에서 나오는 결과 화면
  // 1. button clikc
  // 2. div click

 

 

43강

복잡한 이벤트와 상태 디자인

- 동작 설명

- State와 event handler 나누기

- 비슷한거끼리 묶기

 

State

- 사용자가 화면에서 변화를 느끼는 요소

 

Event handler

- 사용자가 어떤 행동을 취하는 것

 

드롭다운 컴포넌트

1. 드롭다운 클릭 => Event handler

2. 옵션들이 나타남 => state

3. 하나의 옵션을 클릭함 => Event handler

4. 옵션들이 사라짐 => state

5. 클릭한 옵션이 박스에 표시 됨 => state

 

비슷한 것 묶기 (응집력을 가진 아이들끼리 묶기)

1. 드롭다운 클릭 => Event handler

2. 옵션들이 나타남 => state / 옵션 열림 true / 옵션이 사라짐 false

3. 하나의 옵션을 클릭함 => Event handler 

4. 옵션들이 사라짐 => state / 옵션 사라짐 false / 옵션이 선택되지 않음 null

5. 클릭한 옵션이 박스에 표시 됨 => state

 

 

이야... 이번 주말에는 43강 무조건 실습 무조건 무조건 무조건 연습해야겠다....