✏️ 구현 내용
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
'Assignment' 카테고리의 다른 글
| week4 - CRA (0) | 2022.12.10 |
|---|---|
| week3 - hook (0) | 2022.12.10 |
| week2 - Component (0) | 2022.12.10 |
| week1 - ES6 (0) | 2022.12.10 |
| 스테이지어스 was (0) | 2022.10.08 |