React hooks in action 4~5

부수 효과?

어떤 방식으로든 외부에 영향을 미치는 동작

useEffect?

언제 사용?
컴포넌트가 처음 나타날 때(API 호출, 이벤트 등록)
컴포넌트가 업데이트될 때(특정 값이 바뀔 때 실행되는 코드)
컴포넌트가 사라질 때(이벤트 정리, 타이머 정리 등)

useEffect 호출 방법

• 두번째 인자 없음
  매번 렌더링이 끝난 다음에 실행 됨
  useEffect(()) => {});
• 빈 배열을 두번째 인자로 지정함
  컴포넌트가 마운트 될 때 한번만 실행됨
  useEffect(() => {},[]);
• 두번째 인자로 의존 관계 배열을 지정함
  의존 관계 배열에 있는 값이 변할 때만 실행됨
  useEffect(() => {},[dep1,dep2]);
• 함수를 반환함
  컴포넌트가 언마운트되거나 효과를 다시 실행 하기 전에 리액트가 정리 함수를 호출해 줌
  useEffect(()) => { .. return () => {}},[dep1, dep2]);

내가 했던 실수
useEffect 안에서 useQuery 호출하기 (...)

내 머릿속에서 이론상 useEffect에 의존성을 걸어두고 API를 호출하는게 될 줄 알았으나 바로 에러가 났었던 기억이 있음

해당 로직이 불가한 이유는 react hook 규칙을 위반 하는 것이기 때문이라고 함

React는 훅이 항상 컴포넌트의 최상위에서 실행되기를 기대하는데 useEffect 내부에서 useQuery를 호출하면 렌더링 중이 아닐 때 훅을 실행하는 것이 되어서 React의 규칙을 위반하게 되는 것이라고...

useRef?

React에서 특정 요소나 값을 저장할 때 사용하는 훅
렌더링 없이 값을 저장하고 유지할 수 있는 변수를 만들 때 사용함
current라는 프로퍼티를 가진 객체를 돌려줌

const ref = useRef(initial);
ref.current; //initail

언제 사용?
DOM 요소 직접 조작할 때 (ex: 포커스, 스크롤 조작)
렌더링 없이 값을 유지하고 싶을 때 (ex: 이전 값 저장, 타이머 ID 저장)

import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef(null); // 초기값 null

  useEffect(() => {
    inputRef.current.focus(); // 컴포넌트가 나타나면 input에 포커스
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스!" />;
}

ref={inputRef}를 통해 해당 DOM 요소(input)를 직접 선택 가능
inputRef.current를 이용해서 요소에 접근하고 조작 가능

렌더링 없이 상태 값 유지 (state 대체)

import { useRef, useState } from "react";

function Counter() {
  const countRef = useRef(0);
  const [state, setState] = useState(0);

  const increase = () => {
    countRef.current += 1; // ❌ 렌더링 안 됨
    setState(state + 1); // ✅ 렌더링 됨
    console.log("useRef:", countRef.current);
  };

  return (
    <div>
      <p>State: {state}</p>
      <p>Ref: {countRef.current}</p>
      <button onClick={increase}>증가</button>
    </div>
  );
}

useRef는 값이 변해도 컴포넌트가 다시 렌더링되지 않음
useState와 다르게 화면을 다시 그리지 않고 변수처럼 값 저장 가능

사용 이유?
굳이 useRef를 사용하는 이유를 생각해보면 "리렌더링이 필요 없는 값" 이라면 useRef를 사용하는 것이 더 효율적이라고 함

useState를 쓰면 상태가 변경될 때마다 리렌더링이 발생하지만, useRef는 렌더링 없이 값만 저장할 수 있음

나는 useRef를 본격적으로 사용해본 적은 없고 보통 스크롤 이벤트를 위해 DOM에 접근하는 용도로만 사용해본듯
어떻게 보면 불필요한 리렌더링을 줄일 수는 있겠지만 사용하다보면 리렌더링이 필요한 부분에서도 잘못 사용 될 수도 있을 듯 함
잘 알아보고 써야징