week3 - hook

✏️ 구현 내용

Custom Hook

• video 클릭하면 커지고 다시 클릭하면 작아지게 하기

State

• menu 열고 닫는 기능 → true면 열고 false면 닫고 (애니매이션 x)
• 태그에 직접 event 주지 않고 addEventListner로 등록하기

👩‍💻 Issue

• useEffect에 event를 넣고 인자로 [ ]을 전달하여도 video 클릭하면 이벤트가 중복 실행 ⭕→ 하지만 아직까지 [ ] 넣으면 왜 안되는 지 모르겠음 ❓
• → removeEventListner 이용
• custom hook으로 video 하나마다 state 주기 ❌
• → useState를 사용하면 모든 video가 하나의 state를 공유하게 됨
• 전달 되는 object에 대한 props 줄이기 ⭕
• → spread 연산자, destructing 이용
• HeaderComponent에 있는 메뉴 버튼과 WhiteBoxComponent에 있는 메뉴 버튼 연결 ⭕
• → 상위 컴포넌트인 App 컴포넌트에 HeaderComponent, WhiteBoxComponent를 자식 컴포넌트로 넣고, useState로 state를 만들고 props로 각 컴포넌트에 전달

⛏️ 피드백

1️⃣ useEffect 한 번만 실행되게 하기

useEffect에 [ ]나 removeEventListner 사용으로 evnet가 한번만 실행되게 해야한다. 이벤트 스케쥴러로 인해 이벤트는 Component rerendering과 별개로 따로 실행된다.

2️⃣ 낭비되는 div 태그 줄이기

const VideoItemComponent = (props) => {
	return (
     <>
        {id.map((a, index) => {
	        return (
	          <div key={index} id={`video${index}`}>
					)
				}
		</>
}

const VideoComponent = (props) => {
	return (
    <div id="videos">
      <VideoItemComponent {...videoInfoObj} />
    </div>
  );
}

const VideoItemComponent = (props) => {
return (
    <div id={`video${props.index}`}></div>
  );
}
	
const VideoComponent(props) = () => {
	return (
    <div id="videos">
      {videoInfoObj.id.map((a, index) => {
        return (
          <VideoItemComponent key={index} index={index} {...videoInfoObj} />
        );
      })}
    </div>
  );
}

낭비되는 태그를 줄이고 <></> 태그를 쓰지 않는다.

3️⃣ 리랜더링을 줄이는 방안 고민

4️⃣ Component 이름 수정

component 이름만 보고 알 수 있게 GrayBoxComponent, WhiteBoxComponent 등의 component 이름 수정

🧷 Github

stageus_front-end/youtube_custom-hook at main · kknyapple/stageus_front-end