week5 - Redux

✏️ 구현 내용

Redux

• store, reducer, action
• custom hook 사용

Nav page

• youtube 나머지 페이지 구성
• nav 클릭하면 video 화면 대신 다른 page 출력 (html만 보이게 하기)

👩‍💻 Issue

• store은 한 개만 존재해야 하는데 reducer가 여러 개 있음 ⭕ → 하지만 reducer 1개만 사용하기
• → combineReducer로 여러 개의 reducer을 rootReducer에 합침
• nav 메뉴마다 state를 주고 싶은데 중복되는 코드가 너무 많음 (action, reducer 함수) ❌
• nav에 따라 page를 바꿀 때 videoComponent를 null 상태로 바꿔주는데 useEffect에 removeEventListner에서 에러 발생 ⭕→ custom hook을 이벤트가 발생하는 태그에 직접 이벤트 등록
• → useEffect에 []전달하여 에러 해결, 하지만 이번에는 video 클릭 이벤트가 작동 되지 않는 에러 발생
• props로 간단하게 해결할 수 있는 것은 redux 사용 안 함 ⭕
• 데이터 object 수정 ⭕
  • videosData
  • const videosData = [ { id: "0", img: "img0", content: "content0", }, { id: "1", img: "img0", content: "content0", }, { id: "2", img: "img0", content: "content0", }, { id: "3", img: "img0", content: "content0", }, { id: "4", img: "img0", content: "content0", }, { id: "5", img: "img0", content: "content0", }, { id: "6", img: "img0", content: "content0", }, { id: "7", img: "img0", content: "content0", }, { id: "8", img: "img0", content: "content0", }, { id: "9", img: "img0", content: "content0", }, { id: "10", img: "img0", content: "content0", }, ];
  • menusData
  • const menusData = [ { id: "0", img: "menu0", name: "home", }, { id: "1", img: "menu1", name: "search", }, { id: "2", img: "menu2", name: "shorts", }, { id: "3", img: "menu3", name: "describe", }, { id: "4", img: "menu4", name: "originals", }, { id: "5", img: "menu5", name: "music", }, { id: "6", img: "menu6", name: "storage", }, { id: "7", img: "menu7", name: "offline", }, ];
  • NavItemComponent
  • const { menu } = props; return ( <div id={`menu${menu.id}`}> <div id="menu"> <div id="button-menu"> <img src={`./images/${menu.img}.jpg`} /> {menu.name} </div> </div> </div> );
  • VideoItemComponet
  • const { video } = props; return ( <div id={video.id} onClick={videoOnClickHandler}> <div id="video"> <div id="thumbnail"> <img src={`./images/${video.img}.jpg`} /> </div> <div id="video-content"> <img src={`./images/${video.content}.jpg`} /> </div> </div> </div> );

⛏️ 피드백

1️⃣ 백엔드 state 만들기

비디오처럼 개수가 정해져 있지 않고 자주 바뀌는 데이터는 state로 관리해준다. 백엔드에서 받아오는 데이터는 state로 만들어준다.

//dataReducer.js
import { videosData } from "../data/videoData";

const initState = {
  data: videosData,
};

const reducer = (state = initState, action) => {
  switch (action.type) {
    case "SHOW_VIDEO":
      return {
        data: action.data,
      };

    default:
      return state;
  }
};

//action.js
const showVideo = (data) => {
  return { type: "GET_VIDEO", data };
};

//VideoItemComponent.js
const data = useSelector((state) => state.dataReducer.data);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(showVideo(data));
  }, [dispatch]);

2️⃣ type 명, navReducer 하나로 합치기

const showMenu0 = () => {
  return {
    type: "MENU_0", //type: CHANGE_MENU, SET_MENU로 //매개변수로 index 받기
  };
};

const showMenu1 = () => {
  return { type: "MENU_1" };
};

const showMenu2 = () => {
  return { type: "MENU_2" };
};

const showMenu = (menu) => {
  return { type: "CHANGE_MENU", menu };
};

const initState = {
  menu: "home",
};

const reducer = (state = initState, action) => {
  switch (action.type) {
    case "CHANGE_MENU":
      return {
        menu: action.menu,
      };

    default:
      return state;
  }

3️⃣ 조건에 따라 보여지는 component 바꾸기

<main id="container">
      <NavComponent />
      {
        //1. 삼항연산자
				 page == 0 ? <VideoComponent /> : <div>{`page${page}`}</div>

        //2. 컴포넌트를 넣을 때 추천 방식
        (page == 0 && <VideoComponent />) ||
          (page == 1 && <div>다른 컴포넌트</div>)

        //3. if, switch문
      }
</main>

<main id="container">
      <NavComponent />
      {(menu == "home" && <VideoComponent />) ||
        (menu == "search" && <div>Component1</div>) ||
        (menu == "shorts" && <div>Component2</div>) ||
        (menu == "describe" && <div>Component3</div>) ||
        (menu == "originals" && <div>Component4</div>) ||
        (menu == "music" && <div>Component5</div>) ||
        (menu == "storage" && <div>Component6</div>) ||
        (menu == "offline" && <div>Component7</div>)}
    </main>

4️⃣ custom hook 다른 폴더로

custom hook은 component에 넣지 않는다. 참고로 custom hook은 state로 관리하지 않는다. 상태 관리는 주로 state의 시작 지점과 도착 지점이 다를 때 사용한다.

5️⃣ reducer와 store는 1:1 매칭

reducer 한 개 당 store 한 개, reducer가 너무 많을 때 나누기

6️⃣ map 에 null이면 실행되지 않게 하기

<div id="videos">
      {data &&
        data.map((video) => {
          return <VideoItemComponent key={video.id} video={video} />;
        })}
    </div>

자신만의 컨벤션 정해보기!!

🧷 Github

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