week2 - Component

✏️ 구현 내용

React 적용

• script로 react, react-dom

Compoent 단위로 구현하기

• HeaderComponent
• ContainerComponent
  • VideoComponent
  • NavComponent
• SideNavComponent
  • GrayBoxComponent
  • WhiteBoxComponent

Props 전달

• props 전달 최대한 적게 하기

👩‍💻 Issue

• event delegation 사용 ❌
• → event delegation을 사용하는 이유?
• menu, video에서 중복 컴포넌트 제거 ⭕
• → map 이용 (component를 return 해줘야 해서 forEach가 아닌 map 이용)

⛏️ 피드백

1️⃣ 화면 크기에 따라 video 크기 조정

#videos {
  display: flex;
  flex-wrap: wrap;
}

flex와 flex-wrap을 이용해 화면 크기에 맞게 한 줄에 나오는 video 개수를 조정한다.

2️⃣ Event delegation로 상위 태그에 이벤트 등록

React.useEffect(() => {
	document
  .getElementById("header-menus")
  .addEventListener("mouseover", whiteBoxOnMouseOver);

  document
  .getElementById("header-menus")
  .addEventListener("mouseout", whiteBoxOnMouseOut);
}, []);

React.useEffect(() => {
	document
  .getElementById("menus")
  .addEventListener("mouseover", navOnMouseOver);

  document
  .getElementById("menus")
  .addEventListener("mouseout", navOnMouseOut);
}, []);

React.useEffect(() => {
	document
  .getElementById("videos")
  .addEventListener("click", videoOnClickHandler);
	  return () => {
	    document
      .getElementById("videos")
      .removeEventListener("click", videoOnClickHandler);
    };
});

상위 태그에 event를 등록해 조건문으로 특정 id일 때만 event가 실행되게 해준다.

3️⃣ HeaderComponent 세분화

const HeaderEndContainerComponent = () => {
	return (
		<header id="header">
			<HeaderStartContainerComponent />
			<HeaderMiddleContainerComponent />
			<HeaderEndContainerComponent />
		</header>
	);
}

HeaderComponent를 더 작은 Component 들로 나누었다.

🧷 Github

stageus_front-end/youtube_component at main · kknyapple/stageus_front-end