REACT. UI Full Course | Netflix 클론 코딩 (3)

1. 마우스를 오버했을 때 영상 재생하기

const [isHovered, setIsHovered] = useState(false);
const trailer = "https://영상 주소 생략"; 

<div
  className="listItem"
  onMouseEnter={() => setIsHovered(true)}
  onMouseLeave={() => setIsHovered(false)}
>

{isHovered && (
  <>
    <video src={trailer} autoPlay={true} loop />
    <div className="itemInfo">
      <div className="icons">
        <PlayArrow className="icon" />
        <Add className="icon" />
        <ThumbUpAltOutlined className="icon" />
        <ThumbDownOutlined className="icon" />
      </div>
      <div className="itemInfoTop">
        <span>1 hour 14 mins</span>
        <span className="limit">+16</span>
        <span>1999</span>
      </div>
      <div className="desc">
        Lorem ipsum ...
      </div>
      <div className="genre">Action</div>
    </div>
  </>
)}

리액트는 참 신기한게 HTML 사이에 중괄호{}가 난무한다

 

여튼 마우스 오버 중이면 = setIsHover(true)이면

{중괄호 안의 비디오가 자동 재생된다}

 

2. register 페이지 구현하기

아래에 email을 적어 Get Started 눌러 이메일을 등록하고, 비밀번호를 또 등록하면 아이디 등록이 완료된다

이메일 등록

비밀번호 등록

 1. 이메일 

const [email, setEmail] = useState("");
const emailRef = useRef();

const handleStart = () => {setEmail(emailRef.current.value);};
  
<div className="input">
  <input type="email" placeholder="email address" ref={emailRef} />
  <button className="registerButton" onClick={handleStart}>Get Started</button>
</div>

input 박스에 이메일을 넣고 button을 누르면 그 값이 setEmail에 들어가게 된다

 

 2. 비밀번호 

const [password, setPassword] = useState("");
const passwordRef = useRef();

const handleFinish = () => {setPassword(passwordRef.current.value);};
  
<div className="input">
  <input type="password" placeholder="password" ref={passwordRef} />
  <button className="registerButton" onClick={handleFinish}>Start</button>
</div>

input 박스에 비밀번호를 넣고 button을 누르면 그 값이 setPassword에 들어가게 된다

 

 3. 이메일과 비밀번호를 합치기 

{!email ? (
  <div className="input">
    <input type="email" placeholder="email address" ref={emailRef} />
    <button className="registerButton" onClick={handleStart}>Get Started</button>
  </div>
) : (
  <div className="input">
    <input type="password" placeholder="password" ref={passwordRef} />
    <button className="registerButton" onClick={handleFinish}>Start</button>
  </div>
)}

이메일 값이 없다면 이메일을 적을 수 있게, 이메일 값이 있다면 비밀번호를 적을 수 있게 if문으로 리턴한다

 

---

 여기까지 React Netflix Movie App Design Tutorial | React UI Full Course for Beginners 이었습니다.

 

링크