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

1. git 브랜치 clone하기

git clone -b react-mini --single-branch https://github.com/safak/youtube.git .

git 특정 branch만 클론 하는 방법

 

git clone -b {branch_name} --single-branch {저장소 URL}

 

조금 특이한 것이 npx creat-react-app를 하면 지저분한 폴더가 많이 생기니

 

자신의 깃허브의 저장소 중 하나의 브랜치를 클론하면 된다고 한다

 

+ 뒤에 .을 꼭 찍어줘야 youtube폴더 안에 생기는 것이 아니라 바로 파일들이 생김

 

+ 나의 폴더 안에 git init을 했다면 오류가 날 것이다 git 파일을 삭제하고 다시 하면 됨

 

 

 

 

2. 각종 설치하기

<node_modules 설치하기>

터미널에 yarn 만 치면 됨

 

<sass 설치하기>

터미널에 yarn add sass 치기

 

<아이콘 쉽게 가져오기>

터미널에 yarn add @material-ui/icons @material-ui/core 치기

import { 아이콘 이름 } from "@material-ui/icons"; 

return {
  return <div>
    <아이콘 이름/>
  </div>
}
---------< 예 시 >-------------------------------

import { AcUnit } from "@material-ui/icons";

return {
  return <div>
    <AcUnit/>
  </div>
}

https://mui.com/material-ui/material-icons/ 참고

3. useState를 통해 스크롤 값 관리하기

Hook이라는 기능을 통해 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

const [isScrolled, setIsScrolled] = useState(false);

useState를 사용할 때에는 상태의 기본 값을 파라미터로 넣어서 호출해준다

 

함수를 호출해주면 배열이 반환되는데, 이 때 첫 번째 원소는 현재 상태, 두 번째 원소는 Setter 함수이다

 

Y 스크롤 값이 0 이면 false를, 0이 아니면 true를 반환해 준다

그리고 return () => {window.onscroll = null}을 통해 clean-up 해준다

  const [isScrolled, setIsScrolled] = useState(false);

  window.onscroll = () => {
    setIsScrolled(window.pageYOffset === 0 ? false : true);
    return () => (window.onscroll = null);
  };

 

isScrolled(첫 번째 요소)가 true이면 className을 navbar scrolled로 설정하고

false이면 navbar로 바꿔준다

  const [isScrolled, setIsScrolled] = useState(false);

  window.onscroll = () => {
    setIsScrolled(window.pageYOffset === 0 ? false : true);
    return () => (window.onscroll = null);
  };

  return (
    <div className={isScrolled ? "navbar scrolled" : "navbar"}>

 

scss에서 navbar scrolled를 만들어준다

.navbar {
  width: 100%;
  color: white;
  font-size: 14px;
  position: fixed;
  top: 0;
  z-index: 999;
  background: linear-gradient(to top, transparent 0%, rgb(0,0,0,0.3) 50%);

  &.scrolled {
    background-color: var(--main-color);
  }
}