React Hooks

useState

setState(num+1); : 기존의 방식
setState((current)=>{return current+1}); : 함수형 업데이트 방식

이 두 방식의 차이점은 무엇일까?
기존의 방식은 setState(num+1);*3 을 하면 +3이 되는 것이 아니라 +1이 된다. 왜냐하면 각각 실행되는 것이 아니라 배치형식으로 한번에 모아서 처리하기 때문이다. 한번에 모아 최종적으로 한번만 실행한다.
함수형 업데이트 방식을 사용하여 3번 연속실행하면 +3이 나온다. 그 명령들을 모아서 순차적으로 한번씩 실행시킨다.
왜 batch형식으로 동작하는가?
리액트의 장점 중 하나는 최소한의 렌더링이다. 그래서 한번에 모아서 처리하는 배치형식으로 동작하는 것임

useEffect

리액트 컴포넌트가 렌더링 될때마다 특정 작업을 수행하도록 설정하는 훅.
우리가 input태그를 만들고(value랑 onchange있음) 값을 입력하면 state가 변경된다. state가 변경되면? -> 렌더링 일어남
그런데 useEffect는 렌더링될때마다 실행되기 때문에 input에 값이 입력될때마다 useEffect가 실행된다.
넘 비효율적. 해결방법은?

의존성 배열 사용
useEffect(()=>{},[ 의존성 배열 넣는 곳])

이 배열에 값을 넣으면 그 값이 바뀔 때마다 useEffect를 실행할게 라는 의미
그럼 빈 배열을 넣으면 화면이 처음 렌더링될 때 딱 한번만 실행하고 다른 값이 변경되어도 렌더링이 일어나도 실행되지 않는다! 빈배열은 바뀔것이 없응게!!!
그러면 의존성 배열에 무언가를 넣는다면?
input의 값이라고 예를 들면
useEffect(()=>{},[value])
이러면 인풋에 값이 입력될 때마다 useEffect가 실행될 것이다.

useRef

const ref = useRef('초기값');

이거를 콘솔에 찍어보면 초기값 이름을 가진 'current 객체'가 담겨있다.
이것은 컴포넌트가 계속 렌더링될어도 값이 유지된다.
ref 값 변경은 렌더링을 일으키지 않기 때문에 변수들의 초기화를 막을 수 있다.
그래서 저장공간으로서 사용된다.
state와 비슷한 역할을 해요. 다만 state는 변화가 일어나면 다시 렌더링이 일어나요. 내부 변수들은 초기화가 된다.
값 변화가 일어나도 값이 변경되지 않기때문!

ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

import { useEffect, useRef, useState } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");
  const pwRef = useRef("");

  const [id, setId] = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  // 왜 useEffect 안에 놓았을까요?
  useEffect(() => {
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, [id]);

  return (
    <>
      <div>
        아이디 :
        <input
          type="text"
          ref={idRef}
          value={id}
          onChange={onIdChangeHandler}
        />
      </div>
      <div>
        비밀번호 : <input type="password" ref={pwRef} />
      </div>
    </>
  );
}

export default App;

의존성배열에 id를 넣으면 id state가 바뀔때마다 id길이가 10이 넘는지 아닌지 파악해야하기 때문.

useContext

부모->자식->그의 자식->...
리액트는 이렇게 props를 전달하는 방식이다. 근데 이 depth가 깊어지게 되면 prop drilling이 일어난다. 어떤 컴포넌트에서 왔는지가 모호해지고 오류발생시 오류를 찾기가 매우힘들다.
그래서 나온것이 useContext!!
createContext(컨텍스트 생성)
consumer(컨텍스트 변화 감지)
provider(컨텍스트 하위로 전달)
1->4로 가려면 1->2->3->4를 거쳐야한다.
하지만 context API를 사용하면
1->4로 다이렉트로 전달이 가능