[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;