리액트 공부하기 - 자주 쓰이는 다양한 내장 훅(hook)들 : useRef, useMemo, useCallback 등

 

🍈🐰🤍

 

useRef를 공부하며,

다른 내장 훅들도 같이 알아두면 좋을 것 같아서 정리 해보기. - 🧚‍♀️

---

 

 

---

💡✨useRef

useRef는 React에서 DOM 요소에 직접 접근하거나, 변화를 감지하지 않고 값을 저장할 때 쓰는 훅

 

: 컴포넌트가 리렌더링되어도 값이 유지되고, DOM 요소를 직접 조작할 때 사용한다.

  Ex : 주로 input 요소 같은것을 직접 건드릴 때 사용

 

*useRef 를 보다 자세히 이해하고 싶다면, 연관 개념인 컨트롤 컴포넌트를 알아보는 것을 추천 

 

 

useRef 사용방법 :

 

 

 

  useRef 기본문법 :

import { useRef } from 'react';

const myRef = useRef(initialValue);

 

- initialValue: 처음에 넣고 싶은 값 (예: null, 0, "", 등)

- myRef.current를 통해 값에 접근하거나 변경할 수 있어.

- 값이 바뀌어도 리렌더링되지 않음 → 이게 핵심!

 

 

 

 

  useRef 예제 코드 :

 

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null); // input을 가리키는 ref 만들기

  const focusInput = () => {
    // 버튼 누르면 input에 포커스!
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="클릭하면 포커스 돼요" />
      <button onClick={focusInput}>포커스 주기</button>
    </div>
  );
}

→ input 박스를 클릭 안 해도, 버튼으로 "자동으로 커서" 옮기고 싶을 때 사용.

---

💡✨useMemo

: 값을 메모이제이션해서 불필요한 계산을 방지할 때 사용해. 성능 최적화에 좋아.

 

→ 계산이 오래 걸리는 코드를 "기억"해서, 다시 안 하게 해줘!

     값을 다시 만들지 않고 "기억해서" 성능을 좋게 해줘!

 

 

useMemo 기본 문법:

const memoizedValue = useMemo(() => {
  // 연산 로직
  return 계산된값;
}, [의존성배열]);

 

→ useMemo(() => ..., [deps])는 의존성 배열(deps)이 변경될 때만 콜백 함수를 실행합니다.

→ 그렇지 않으면 이전에 저장된 값을 그대로 반환합니다.

 

 

예제 코드 :

import { useState, useMemo } from 'react';

function Example() {
  const [number, setNumber] = useState(0);

  // number가 바뀔 때만 계산
  const double = useMemo(() => {
    console.log('계산 중...');
    return number * 2;
  }, [number]);

  return (
    <div>
      <input value={number} onChange={e => setNumber(Number(e.target.value))} />
      <p>두 배: {double}</p>
    </div>
  );
}

---

💡✨useCallback

: 함수를 메모이제이션해서 불필요한 함수 재생성 방지에 사용해.

그냥 컴포넌트를 따로 만들어서, 커스텀 훅을 만들어서 해도 되지 않을까. 하는 궁금증이 들었고, 지피티가 아래 처럼 대답해줬지만

아직 이해하기 어려운 단계라 우선 메모 부터 해둔다.

📌 언제 그냥 컴포넌트로 충분해?

• 자식 컴포넌트가 props로 전달된 함수가 바뀌든 말든 리렌더링되지 않는 경우
• 자식 컴포넌트에서 React.memo 같은 최적화가 필요하지 않거나 쓰지 않을 경우
• 상태나 함수가 자주 바뀌지 않고, 렌더링에 큰 부담이 없는 경우

📌 언제 useCallback이 필요한데?

• 부모 컴포넌트에서 함수를 만들어서 자식 컴포넌트에 전달하는데
  ➜ 자식 컴포넌트가 React.memo로 최적화돼 있다면
  ➜ 함수 reference가 바뀌면 불필요하게 리렌더링돼
  ➜ 이때 useCallback으로 함수 reference를 고정해주는 거야

 

기본 문법 : 

const memoizedCallback = useCallback(() => {
  // 실행할 함수 내용
}, [의존성배열]);

 

→ useCallback은 함수가 매번 새로 생성되는 걸 방지해.

→ 의존성 배열의 값이 변경될 때만 함수를 새로 생성하고, 그렇지 않으면 이전 함수를 재사용해.

→주로 props로 함수를 자식 컴포넌트에 넘길 때 유용해.