React 면접 준비

작성일 : 2025.01.01

1. useState vs useReducer: 언제 무엇을 선택할까?

상태 관리는 React 애플리케이션에서 가장 중요한 부분 중 하나입니다. useState와 useReducer는 각각 다른 상황에서 유용하게 사용될 수 있습니다.

useState가 적합한 경우

독립적인 단순한 상태 값 관리
상태 업데이트 로직이 단순할 때
상태 변경이 2-3개의 간단한 액션으로 이뤄질 때

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Count: {count}
    </button>
  );
}

useReducer가 적합한 경우

여러 상태가 서로 연관되어 있을 때
복잡한 상태 업데이트 로직이 필요할 때
상태 변경 패턴을 일관되게 관리해야 할 때

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'reset':
      return { count: 0, lastReset: Date.now() };
    default:
      return state;
  }
}

function ComplexCounter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, lastReset: null });
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

2. 커스텀 훅의 강력함

커스텀 훅은 React의 코드 재사용성을 크게 향상시키는 강력한 패턴입니다.

커스텀 훅의 장점

로직 재사용성 향상
관심사 분리를 통한 코드 구조화
테스트 용이성
코드 가독성 개선

// 윈도우 크기를 추적하는 커스텀 훅
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

// 사용 예시
function ResponsiveComponent() {
  const { width, height } = useWindowSize();
  
  return (
    <div>
      Window size: {width} x {height}
    </div>
  );
}

3. React의 성능 최적화 트리오: memo, useMemo, useCallback

React 애플리케이션의 성능을 최적화하는 세 가지 핵심 도구에 대해 알아보겠습니다.

React.memo

컴포넌트의 props가 변경되지 않았다면 리렌더링을 방지합니다.

const ExpensiveComponent = React.memo(({ data }) => {
  // 복잡한 렌더링 로직
  return <div>{/* 렌더링 결과 */}</div>;
});

useMemo

계산 비용이 큰 값의 재계산을 방지합니다.

function DataProcessor({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => expensiveCalculation(item));
  }, [data]);

  return <div>{processedData.map(item => <Item key={item.id} {...item} />)}</div>;
}

useCallback

함수의 불필요한 재생성을 방지합니다.

function ParentComponent({ data }) {
  const handleClick = useCallback(() => {
    console.log(data);
  }, [data]);

  return <ChildComponent onClick={handleClick} />;
}

4. useEffect: 모범 사례와 주의사항

useEffect는 React의 부수 효과를 관리하는 핵심 훅입니다.

모범 사례

의존성 배열 정확히 지정하기
클린업 함수 활용하기
API 호출 관리하기

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    
    async function fetchData() {
      try {
        const response = await fetch(url, {
          signal: controller.signal
        });
        const result = await response.json();
        setData(result);
      } catch (error) {
        if (!error.name === 'AbortError') {
          setError(error);
        }
      }
    }

    fetchData();

    return () => {
      controller.abort();
    };
  }, [url]);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;
  
  return <div>{/* 데이터 표시 */}</div>;
}

주의사항

무한 루프 방지하기
불필요한 의존성 제거하기
부수 효과 최소화하기

5. 코드 스플리팅과 React.lazy

대규모 애플리케이션의 성능을 향상시키기 위한 코드 스플리팅 전략을 살펴보겠습니다.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route 
          path="/dashboard" 
          element={<LazyComponent />} 
        />
      </Routes>
    </Suspense>
  );
}

6. useContext: 전역 상태 관리의 강력함과 주의점

Context API를 통한 상태 관리의 장단점을 알아보겠습니다.

const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const value = useMemo(() => ({
    theme,
    setTheme
  }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

주의사항

Context 값 변경 시 모든 소비자 컴포넌트가 리렌더링됨
성능 최적화를 위한 적절한 Context 분리 필요
상태 업데이트 로직의 중앙화 필요

7. 복잡한 컴포넌트 설계 원칙

효율적인 React 컴포넌트 설계를 위한 핵심 원칙들을 살펴보겠습니다.

단일 책임 원칙 (SRP)

각 컴포넌트는 하나의 책임만 가져야 합니다.

// 잘못된 예
function UserProfile({ user }) {
  return (
    <div>
      <UserInfo user={user} />
      <UserPosts user={user} />
      <UserFriends user={user} />
      <UserSettings user={user} />
    </div>
  );
}

// 좋은 예
function UserProfile({ user }) {
  return <UserInfo user={user} />;
}

function UserDashboard({ user }) {
  return (
    <div>
      <UserProfile user={user} />
      <UserContent user={user} />
    </div>
  );
}

컴포넌트 구성 패턴

컨테이너/프레젠테이션 패턴
고차 컴포넌트 (HOC)
컴포지션

8. 성능 분석 도구와 기법

React 애플리케이션의 성능을 분석하고 최적화하는 방법을 알아보겠습니다.

주요 도구

React Developer Tools
- Components 탭
- Profiler 탭
Chrome DevTools
- Performance 탭
- Network 탭
Lighthouse
- 성능 점수
- 최적화 제안

why-did-you-render 활용

불필요한 리렌더링을 찾아내는 강력한 도구입니다.

import whyDidYouRender from '@welldone-software/why-did-you-render';
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

9. Todo 리스트 실시간 상태 관리

실제 프로젝트에서 자주 구현하게 되는 Todo 리스트를 통해 상태 관리 전략을 살펴보겠습니다.

function useTodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = useCallback((text) => {
    setTodos(prev => [...prev, {
      id: Date.now(),
      text,
      completed: false
    }]);
  }, []);

  const deleteTodo = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  const toggleTodo = useCallback((id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed }
        : todo
    ));
  }, []);

  return {
    todos,
    addTodo,
    deleteTodo,
    toggleTodo
  };
}

function TodoApp() {
  const { todos, addTodo, deleteTodo, toggleTodo } = useTodoList();
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    addTodo(input);
    setInput('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Add a todo"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{
              textDecoration: todo.completed ? 'line-through' : 'none'
            }}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

10. Virtual DOM과 성능 최적화

React의 Virtual DOM이 어떻게 성능을 최적화하는지 살펴보겠습니다.

Virtual DOM의 작동 원리

상태 변경 발생
새로운 Virtual DOM 트리 생성
이전 Virtual DOM과 비교 (Diffing)
실제 DOM에 최소한의 변경사항 적용

성능 최적화 전략

불필요한 리렌더링 방지
상태 업데이트 일괄 처리
컴포넌트 분할과 메모이제이션

마무리

이러한 개념들은 실제 프로젝트에서 다양한 방식으로 활용됩니다. 면접에서는 이론적인 이해뿐만 아니라, 실제 프로젝트에서의 적용 경험과 문제 해결 사례를 준비하는 것이 중요합니다. 특히 성능 최적화나 상태 관리와 관련된 실제 경험은 면접관들이 큰 관심을 가지는 부분입니다.

1. useState vs useReducer: 언제 무엇을 선택할까?​

useState가 적합한 경우​

useReducer가 적합한 경우​

2. 커스텀 훅의 강력함​

커스텀 훅의 장점​

3. React의 성능 최적화 트리오: memo, useMemo, useCallback​

React.memo​

useMemo​

useCallback​

4. useEffect: 모범 사례와 주의사항​

모범 사례​

주의사항​

5. 코드 스플리팅과 React.lazy​

6. useContext: 전역 상태 관리의 강력함과 주의점​

주의사항​

7. 복잡한 컴포넌트 설계 원칙​

단일 책임 원칙 (SRP)​

컴포넌트 구성 패턴​

8. 성능 분석 도구와 기법​

주요 도구​

why-did-you-render 활용​

9. Todo 리스트 실시간 상태 관리​

10. Virtual DOM과 성능 최적화​

Virtual DOM의 작동 원리​

성능 최적화 전략​

마무리​

1. useState vs useReducer: 언제 무엇을 선택할까?

useState가 적합한 경우

useReducer가 적합한 경우

2. 커스텀 훅의 강력함

커스텀 훅의 장점

3. React의 성능 최적화 트리오: memo, useMemo, useCallback

React.memo

useMemo

useCallback

4. useEffect: 모범 사례와 주의사항

모범 사례

주의사항

5. 코드 스플리팅과 React.lazy

6. useContext: 전역 상태 관리의 강력함과 주의점

주의사항

7. 복잡한 컴포넌트 설계 원칙

단일 책임 원칙 (SRP)

컴포넌트 구성 패턴

8. 성능 분석 도구와 기법

주요 도구

why-did-you-render 활용

9. Todo 리스트 실시간 상태 관리

10. Virtual DOM과 성능 최적화

Virtual DOM의 작동 원리

성능 최적화 전략

마무리