[React] YouTube Clone Week2
목표
영상시청 화면 구현
영상시청 화면에서 댓글기능 구현
3. 로그인 창 구현
4. youtube data api 사용하여 영상 넣기
1. 영상시청 화면
App.js
//...//
function App() {
const [menubar, setMenubar] = useState(true);
const [videoState, setVideoState] = useState(false);
const [home, setHome] = useState(true);
return (
<>
<div className='searchbar'>
<SearchBar
menubar={menubar}
setMenubar={setMenubar}
videoState={videoState}
setVideoState={setVideoState}
home={home}
setHome={setHome}
/>
</div>
{videoState === false || home === true ? (
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div>
{menubar === true && (
<div className='menubar'>
<MenuBar />
</div>
)}
</div>
<div className='videobody'>
<VideoBody
videoState={videoState}
setVideoState={setVideoState}
home={home}
setHome={setHome}
/>
</div>
</div>
) : (
<div>
<WatchingVideo />
</div>
)}
</>
);
}
export default App;
영상 클릭시 영상시청화면으로 넘어가게 해주기 위해서 state값인 home과 videoState를 useState를 사용하여 생성해주었다.
조건부 렌더링 을 사용하여 home===false거나 videoState===true 일 때 영상시청화면인 WatchingVideo 컴포넌트를 렌더링하도록 하였다.
WatchingVideo.js
import React, { useState } from 'react';
import CreateComment from './CreateComment';
function WatchingVideo() {
const [goodCount, setGoodCount] = useState(0);
const [badCount, setBadCount] = useState(0);
const goodBtnClick = () => {
setGoodCount(goodCount + 1);
};
const badBtnClick = () => {
setBadCount(badCount + 1);
};
return (
<>
<div>
<video alt={'영상'}></video>
</div>
<div>제목</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div>조회수</div>
<div onClick={goodBtnClick}>👍 {goodCount}</div>
<div onClick={badBtnClick}>👎 {badCount}</div>
</div>
<div>
<CreateComment />
</div>
</>
);
}
export default WatchingVideo;
WatchingVideo 컴포넌트는 영상시청 화면 부분이다.
동영상을 보여주는 부분 & 영상의 정보 및 조회수를 보여주는 부분 & 댓글 부분으로 구성되어 있다.
동영상을 보여주는 부분은 따로 컴포넌트를 만들어서 youtube data api를 사용하여 data를 가져와서 구현할 예정이다.
제목 부분도 data의 제목 data를 가져와서 넣어줄 예정이다.
댓글 부분은 CreateComment라는 컴포넌트를 새로 만들어주어서 구현하였다. 내용은 다음과 같다.
2. 댓글 기능 구현
CreateComment.js
import React, { useState, useRef } from 'react';
import CreateList from './CreateList';
function CreateComment() {
const [commentCount, setCommentCount] = useState(0);
const [inputs, setInputs] = useState({
commentData: '',
});
const { commentData } = inputs;
const inputChange = (e) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const [commentLists, setCommentLists] = useState([
{
id: 0,
commentData: '',
},
]);
const nextId = useRef(1);
const putComment = () => {
const commentList = {
id: nextId.current,
commentData,
};
setCommentLists([...commentLists, commentList]);
setInputs({ commentData: '' });
nextId.current += 1;
setCommentCount(commentCount + 1);
};
return (
<>
<div>댓글 {commentCount}개</div>
<div>
<input
name='commentData'
placeholder='공개 댓글 추가'
onChange={inputChange}
value={commentData}
/>
<button onClick={putComment}>등록</button>
</div>
<CreateList commentLists={commentLists} />
</>
);
}
export default CreateComment;
CreateList.js
import React from 'react';
function Data({ data }) {
return (
<div>
<div>{data.commentData}</div>
</div>
);
}
function CreateList({ commentLists }) {
return (
<div>
{commentLists.map((data) => (
<Data data={data} key={data.id} />
))}
</div>
);
}
export default CreateList;
Author And Source
이 문제에 관하여([React] YouTube Clone Week2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@semi_kimm/YouTube-Clone-Week2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)