React 인터뷰: 코딩 챌린지에서 레드 카드를 받지 마세요

Source: Dev.to

친구야, 우리 바차타를 추듯 React Hook에 대해 이야기해보자

보세요, 여기 있는 이 학술적인 텍스트를 보니요. 괜찮긴 한데… 좀 건조하지 않나요? 골이 전혀 없는 축구 경기처럼요. 기본적으로 면접관에게 당신이 jQuery “암흑 시대”부터 전쟁터에 있었던 시니어라는 걸 보여주고 싶다는 거죠, 어제 유튜브 튜토리얼만 본 사람은 아니에요.

⚽ 미드필드 장군: 왜 우리는 실제로 라이브 코딩을 하는가

실제로 면접관은 당신이 빨리 타이핑할 수 있는지에 신경 쓰지 않는다. 그들은 당신이 플레이메이커인지 보고 싶어한다.

• 전술 인식: 코딩하기 전에 질문을 하나요? 아니면 공을 보지 않고 바로 태클에 달려가나요?
• “VAR” 순간: 레드 카드(버그)를 받았을 때 당황하나요, 아니면 재생(콘솔)을 차분히 확인하나요?
• 팀 케미스트리: 동료에게 코드를 설명할 수 있나요? 설명하지 못한다면 소유하고 있지 않은 것이다.

🕺 1, 2, 3, Tap! useDebounce 훅 만들기

useDebounce 를 바차타 전환에 비유해 보세요. 다음 동작으로 바로 뛰어들지 않아요. 박자를 기다립니다. 리드가 “4” 혹은 “8” 카운트(지연)를 기다린 뒤에야 회전을 실행합니다.

팔로워(사용자가 타이핑)가 중간에 마음을 바꾸면 카운트를 다시 초기화합니다. 1, 2, 3, Tap!

import { useState, useEffect, useRef } from 'react';

// This is our Bachata Step: We wait for the right beat
function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  // The 'timeoutRef' is like the coach on the sidelines holding the stopwatch
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    // If the player starts a new sprint (user types),
    // we blow the whistle and stop the previous timer.
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // We set a new timer. Like waiting for the striker to get in position.
    timeoutRef.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // The Cleanup: This is like cooling down after the match.
    // Very important or you get a cramp (memory leak).
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [value, delay]); // We only dance when the value or the rhythm changes!

  return debouncedValue;
}

🥅 Why This Logic is a “Top Corner” Goal

Most juniors forget the Cleanup. If you don’t clear the timeout, it’s like having 11 players on the pitch and then accidentally subbing on 5 more without anyone leaving—total chaos.

• useRef is your Sideline: We use it for the timer because changing a ref doesn’t trigger a re‑render. Using useState for the timer ID would cause unnecessary re‑renders.
• The Beat (Dependencies): If you leave the [value, delay] array empty, your hook is “injured.” It won’t react to anything.
• Smooth Flow: Updating the UI only after the user finishes typing feels like a perfect Bachata flow—no stuttering, no lag, just smooth transitions.

🚩 “레드 카드” 피하기 (일반적인 실수)

• “정적” 플레이어: 정리 함수(cleanup function)를 사용하지 않으면 메모리 누수가 발생합니다—마치 모두가 떠난 뒤에도 경기장 조명을 켜 둔 것과 같습니다.
• 과도한 엔지니어링: 모든 변수에 useMemo를 사용하려 하지 마세요. 이는 페널티킥 중에 백플립을 시도하는 것과 같습니다. 간단하고 깔끔하게 유지하세요.
• 필드에서의 침묵: 코딩하면서 말하지 않으면 면접관은 당신이 막힌 것이라고 생각합니다. 경련(버그)이 있더라도, 생각 과정을 말해보세요!

👟 Pitch에서의 프로 팁

비밀: 인터뷰 중에 setTimeout 구문이 막히면 이렇게 말하세요: “사실, 여기서 상태 업데이트를 지연시키기 위해 타이머가 필요하다는 걸 알고 있어요, 먼저 로직을 모의해볼게요.” 면접관은 전략을 구문보다 더 이해하는 개발자를 좋아합니다. 구문은 구글하면 되지만, 로직이 챔피언스리그를 승리하게 합니다.

흥미롭다면 제 다른 작업을 확인하거나 인사 한 마디 남겨 주세요.

AI가 궁금하신가요?
제 책도 확인해 보세요: Surrounded by AI