React Hooks 정리하기

1. useState

Lazy initialization

공식문서

무거운 작업을 할때, useState 초깃값을 넣는 자리에 값을 넣지 않고 콜백함수의 리턴값으로 받는다.

useState(( ) => { ... }) 와 같이 콜백을 넣어주면 리액트 자체에서 "lazy"하게 맨 처음 렌더링시에만 해당 콜백을 불러준다.

2. useEffect

 useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 돌아가는중");
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log("타이머종료");
    };
  }, []);

3. useRef

Ref값으로 주면 렌더링시 변수값이 유지된다는 점을 기억하자.

DOM 요소 접근

const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef);
    inputRef.current.focus();
  }, []);

  const login = () => {
    alert(`Welcome ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <>
      <input type="text" placeholder="username" ref={inputRef}></input>
      <button onClick={login}>로그인</button>
    </>

4. useContext + Context API

프롭드릴링으로 쭉 내려줄수있지만, 코드가 지저분해짐
그럴때 사용할수있는 방법

꼭 필요할때만 ! 사용해야한다고 나와있긴하지만 개념은 알아두기

5. useMemo

• 컴퍼넌트 최적화를 위해 사용 ; 메모리에 저장하는것이므로 필요할때 적절하게 사용하는것이 중요