Q: useMemo와 useCallback의 차이점과 사용 시점은?

두 Hook 모두 메모이제이션을 통해 불필요한 재계산/재생성을 방지합니다. ```typescript import { useMemo, useCallback } from 'react'; function ProductList({ products, filter }: Props) { // useMemo: 계산 결과를 메모이제이션 (값) const filteredProducts = useMemo( () => products.filter(p => p.category === filter), [products, filter] ); // useCallback: 함수 자체를 메모이제이션 (참조) const handleClick = useCallback((id: string) => { console.log('clicked', id); }, []); return ( {filteredProducts.map(p => (

Question 1

Virtual DOM이란 무엇이며 왜 사용하나요?

Accepted Answer

Virtual DOM은 실제 DOM의 가벼운 JavaScript 객체 복사본입니다. React는 상태 변경 시 새로운 Virtual DOM을 생성하고, 이전 것과 비교(diffing)하여 변경된 부분만 실제 DOM에 반영합니다.

**동작 과정:**
1. 상태 변경 발생
2. 새로운 Virtual DOM 트리 생성
3. 이전 Virtual DOM과 비교 (Reconciliation)
4. 변경된 부분만 실제 DOM에 업데이트 (Commit)

- **성능 최적화**: 직접 DOM을 조작하는 것보다 batch 업데이트가 가능하여 효율적입니다.
- **선언적 프로그래밍**: 개발자는 "어떻게 DOM을 변경할지"가 아니라 "UI가 어떤 상태여야 하는지"만 선언하면 됩니다.
- **크로스 플랫폼**: React Native 등 다른 플랫폼으로의 확장이 가능합니다.
- React 18의 Concurrent Features는 이 과정을 더욱 최적화합니다.

Question 2

useState와 useEffect의 동작 원리를 설명해주세요.

Accepted Answer

```typescript import { useState, useEffect } from 'react'; function UserProfile({ userId }: { userId: string }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { setLoading(true); fetch(`/api/users/${userId}`) .then(res => res.json()) .then(data => { setUser(data); setLoading(false); }); return () => { // 구독 해제, 타이머 정리 등 }; }, [userId]); if (loading) return <

Question 3

useMemo와 useCallback의 차이점과 사용 시점은?

Accepted Answer

두 Hook 모두 메모이제이션을 통해 불필요한 재계산/재생성을 방지합니다. ```typescript import { useMemo, useCallback } from 'react'; function ProductList({ products, filter }: Props) { // useMemo: 계산 결과를 메모이제이션 (값) const filteredProducts = useMemo( () => products.filter(p => p.category === filter), [products, filter] ); // useCallback: 함수 자체를 메모이제이션 (참조) const handleClick = useCallback((id: string) => { console.log('clicked', id); }, []); return (

{filteredProducts.map(p => (

Question 4

React의 상태 관리 방법들을 비교해주세요.

Accepted Answer

React 앱의 상태 관리 방법은 여러 가지가 있으며, 프로젝트 규모와 요구사항에 따라 선택합니다.

```typescript
// 1. useState - 컴포넌트 로컬 상태
const [count, setCount] = useState(0);

// 2. useReducer - 복잡한 상태 로직
const [state, dispatch] = useReducer(reducer, initialState);

// 3. Context API - 전역 상태 (prop drilling 해결)
const ThemeContext = createContext<Theme>('dark');

// 4. 외부 라이브러리
// Zustand (간단한 전역 상태)
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// TanStack Quer

Question 5

React의 리렌더링 조건과 최적화 방법은?

Accepted Answer

React 컴포넌트는 다음 경우에 리렌더링됩니다. **리렌더링 발생 조건:** 1. state가 변경될 때 2. props가 변경될 때 3. 부모 컴포넌트가 리렌더링될 때 4. Context 값이 변경될 때 ```typescript // 1. React.memo - props가 변경되지 않으면 리렌더링 방지 const MemoizedChild = React.memo(function Child({ name }: { name: string }) { return

{name}

; }); // 2. key를 올바르게 사용 {items.map(item => ( // index 대신 고유 id 사용 ))} // 3. 상태 끌어올리기 방지 - 상태를 사용하는 곳에 가까이 function Parent() { return (

{/* 이 컴

Question 6

Custom Hook을 만드는 이유와 규칙을 설명해주세요.

Accepted Answer

Custom Hook은 컴포넌트 로직을 재사용 가능한 함수로 추출하는 패턴입니다. `use`로 시작하는 함수명을 사용합니다. ```typescript // Custom Hook: API 데이터 패칭 function useFetch(url: string) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); async function fetchData() { try { setLoading(true); const res = await fetch(url, { signal: controll

Question 7

useRef의 다양한 용도와 사용법을 설명해주세요.

Accepted Answer

`useRef`는 렌더링 간에 유지되지만 변경 시 리렌더를 일으키지 않는 값을 저장합니다. **1. DOM 요소 접근:** ```tsx function TextInput() { const inputRef = useRef(null); return ( <> ); } ``` **2. 이전 값 저장:** ```tsx function Counter({ count }: { count: number }) { const prevCount = useRef(count); useEffect(() => { prevCount.current = count; }); return

현재: {count}, 이전: {prevCount.current}

;

Question 8

useTransition과 useDeferredValue의 차이점과 사용 시점은?

Accepted Answer

둘 다 React 18의 Concurrent Features로, **긴급하지 않은 업데이트의 우선순위를 낮춥니다.** **useTransition:** ```jsx const [isPending, startTransition] = useTransition(); function handleSearch(value) { setInputValue(value); // 긴급: 입력값 즉시 반영 startTransition(() => { setSearchResults(search(value)); // 비긴급: 결과 업데이트 지연 가능 }); } return isPending ? : ; ``` **useDeferredValue:** ```jsx const deferredQuery = useDeferredValue(query); // query는 즉시 변경, deferredQuery는 지연되어 변경 return

Question 9

Controlled Component와 Uncontrolled Component의 차이점은?

Accepted Answer

**Controlled Component:** React 상태가 입력값의 "유일한 진실의 원천(single source of truth)"입니다. ```tsx function Form() { const [value, setValue] = useState(''); return setValue(e.target.value)} />; } ``` - 모든 입력 변화를 React가 관리 - 실시간 유효성 검사, 조건부 제출 등 세밀한 제어 가능 **Uncontrolled Component:** DOM 자체가 값을 관리하며, `ref`로 필요할 때 접근합니다. ```tsx function Form() { const inputRef = useRef(null); const handleSubmit = () => console.log(inputRef.current?.value); retu

Question 10

React.memo의 올바른 사용법과 한계를 설명해주세요.

Accepted Answer

React.memo는 props가 변경되지 않으면 **리렌더링을 건너뛰는** 고차 컴포넌트입니다.

```jsx
const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  return items.map(item => (
    <Item key={item.id} item={item} onSelect={onSelect} />
  ));
});

// 커스텀 비교 함수
const MemoizedChart = React.memo(Chart, (prev, next) => {
  return prev.data.length === next.data.length 
    && prev.data.every((d, i) => d.value === next.data[i].value);
});
```

**올바른 사용:**
- 렌더링 비용이 높은 컴포넌트 (긴 리스트, 차트, 복잡한 계산)
- 부모가 자주 리렌더되지만

React

01Virtual DOM이란 무엇이며 왜 사용하나요?쉬움핵심 개념

02useState와 useEffect의 동작 원리를 설명해주세요.보통Hooks

03useMemo와 useCallback의 차이점과 사용 시점은?보통Hooks

04React의 상태 관리 방법들을 비교해주세요.보통상태관리

05React의 리렌더링 조건과 최적화 방법은?보통렌더링

06Custom Hook을 만드는 이유와 규칙을 설명해주세요.어려움Hooks

07useRef의 다양한 용도와 사용법을 설명해주세요.보통Hooks

08useTransition과 useDeferredValue의 차이점과 사용 시점은?보통Hooks

09Controlled Component와 Uncontrolled Component의 차이점은?쉬움핵심 개념

10React.memo의 올바른 사용법과 한계를 설명해주세요.보통최적화