React.js 치트시트

React는 컴포넌트 기반 아키텍처로 사용자 인터페이스를 구축하기 위한 대표적인 JavaScript 라이브러리입니다.

함수형 컴포넌트 및 JSX

import React, { useState } from 'react';

export function Greeting({ name, role = "Member" }) {
  return (
    <div className="card">
      <h2>Hello, {name}!</h2>
      <span className="badge">{role}</span>
    </div>
  );
}

핵심 React Hooks

`useState`

const [count, setCount] = useState(0);

// 함수형 상태 업데이트 (항상 최신 상태 보장)
setCount((prev) => prev + 1);

`useEffect`

데이터 가져오기, 구독, DOM 조작과 같은 부수 효과를 처리합니다:

useEffect(() => {
  const handleResize = () => setWindowWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // 정리(Cleanup) 함수는 언마운트 시 또는 효과 재실행 전에 동작
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 빈 의존성 배열: 마운트 시 최초 1회만 실행

`useContext`

Props 드릴링 없이 컨텍스트 데이터를 직접 소비:

const ThemeContext = React.createContext('light');

function Display() {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>Active Theme</div>;
}

`useMemo 및 useCallback`

비용이 큰 연산 결과 메모이제이션 및 참조 동일성 유지를 위한 최적화:

// 비용이 큰 연산 결과 메모이제이션
const filteredUsers = useMemo(() => {
  return users.filter((u) => u.score > threshold);
}, [users, threshold]);

// 콜백 함수 정의 메모이제이션
const handleRemove = useCallback((id) => {
  setItems((prev) => prev.filter((item) => item.id !== id));
}, []);

`useRef`

리렌더링을 유발하지 않고 렌더링 간 변경 가능한 값을 유지:

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus();
};

return <input ref={inputRef} />;

커스텀 훅 (Custom Hooks)

재사용 가능한 상태 로직을 use 접두사가 붙은 독립 함수로 추출:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

Fragments 및 Portals

// 불필요한 DOM 래퍼 태그를 생성하지 않는 Fragments
return (
  <>
    <Header />
    <MainContent />
  </>
);

// 외부 DOM 컨테이너에 직접 렌더링
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('modal-root')
  );
}