REACT. Netflix Clone 정리하기(1)

1. git에서 특정 브랜치만 clone 하기

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

- 뒤에 점(.)을 찍어준다면 파일들이 바로 생성되고,

- 뒤에 점(.)을 찍지 않는다면 폴더가 들어온다

 

2. useState

const [현재 상태, Setter 상태] = useState(__초기값__);

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

Hook이라는 기능을 통해 함수형 컴포넌트에서 상태 관리를 한다

 

3. useRef

useRef는 useState와 다르게 리렌더링 하지 않고, 컴포넌트의 속성만 수정, 저장한다

즉, 불필요한 렌더링을 막을 수 있다

 

예시1

const listRef = useRef();

const handleClick = (direction) => {
  if (direction === "left") {
    listRef.current.style.transform = `translateX(230px)`;
  }
};

 

예시2

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>