Cardemy Card emy ← 탐색으로 돌아가기
R

React 핵심 개념 정리

React 입문자·프론트엔드 면접 대비자를 위해 컴포넌트·Hook·상태 관리·렌더링 최적화의 핵심 개념을 정리했습니다. 각 카드는 용어의 정의뿐 아니라 언제·왜 쓰는지, 자주 하는 실수와 대안을 함께 설명합니다.

18 문항 0 복사 데모 2026.04.20

수록 문항

총 18개

아래 문항들은 이 학습지에 수록된 카드입니다. 각 카드는 문제(Q)와 답(A)으로 구성되어 있으며, 일부 카드에는 추가 해설이 포함되어 있습니다. 로그인하면 이 학습지를 내 계정으로 복사해 카드를 한 장씩 넘기며 반복 학습할 수 있고, 숙달한 카드는 완료 표시하여 다음 세션에서 제외할 수 있습니다.

  1. #1
    Q.

    React에서 UI를 구성하는 기본 단위

    A.

    컴포넌트 (Component)

    함수형·클래스형이 있으나 현재는 함수형이 표준. Props로 데이터를 받아 JSX를 반환한다.
  2. #2
    Q.

    JavaScript 속에 HTML 같은 문법을 쓸 수 있게 해주는 React의 확장 문법

    A.

    JSX

    내부적으로 React.createElement 호출로 변환된다. 중괄호로 JS 표현식을 삽입할 수 있다.
  3. #3
    Q.

    부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터

    A.

    Props

    자식이 props를 직접 수정하면 안 된다. 수정이 필요하면 상위 state로 끌어올린다.
  4. #4
    Q.

    컴포넌트 내부에서 관리하는 변경 가능한 데이터

    A.

    State

    useState 훅으로 선언. setState는 비동기·배치 처리되므로 직전 값 기반 업데이트는 함수형을 쓴다.
  5. #5
    Q.

    컴포넌트의 상태와 생명주기 기능을 함수형 컴포넌트에서 쓰게 해주는 API

    A.

    Hook

    규칙: 최상위에서만 호출, 이름이 use로 시작, 조건부로 호출 금지.
  6. #6
    Q.

    컴포넌트가 렌더링된 뒤 부수 효과를 실행하는 훅

    A.

    useEffect

    의존성 배열로 실행 시점을 제어. 빈 배열이면 마운트 시 한 번만 실행된다. cleanup 함수 반환 가능.
  7. #7
    Q.

    렌더 시 비싼 계산 결과를 메모이즈하는 훅

    A.

    useMemo

    의존성이 바뀔 때만 재계산. 과도한 사용은 오히려 성능·가독성을 해친다.
  8. #8
    Q.

    함수 참조를 메모이즈해 자식의 불필요한 리렌더를 방지하는 훅

    A.

    useCallback

    자식이 React.memo로 감싸져 있을 때 유효하다. 무의미한 래핑은 비용만 증가.
  9. #9
    Q.

    Props drilling을 피해 전역적으로 데이터를 공유하는 메커니즘

    A.

    Context

    테마·인증 정보처럼 깊은 트리에 공유되는 값에 적합. 자주 바뀌는 값은 리렌더 폭주에 유의.
  10. #10
    Q.

    가상 DOM과 실제 DOM을 비교해 최소 변경만 반영하는 과정

    A.

    재조정 (Reconciliation)

    key prop을 통해 리스트 항목의 동일성을 식별. 배열 인덱스를 key로 쓰면 버그가 잘 난다.
  11. #11
    Q.

    동일 props에 동일 결과를 반환하는 컴포넌트를 메모이즈하는 HOC

    A.

    React.memo

    얕은 비교가 기본. 복잡한 객체는 커스텀 비교 함수 또는 useMemo로 안정화해야 한다.
  12. #12
    Q.

    상태가 같아야 할 여러 컴포넌트의 state를 공통 부모로 옮기는 패턴

    A.

    Lifting State Up

    상향 이동한 state는 props로 다시 내려준다. Context나 상태 관리 라이브러리로 대체 가능.
  13. #13
    Q.

    props로 받은 값을 state로 복사할 때 생기는 흔한 버그 원인

    A.

    Prop vs State 혼동

    props가 바뀌어도 state는 최초 값 그대로 고정된다. 파생 state 대신 렌더 중 계산을 먼저 고려.
  14. #14
    Q.

    DOM 요소에 직접 접근하거나 값의 변화를 리렌더 없이 보관하는 훅

    A.

    useRef

    .current로 접근. 값 변경이 리렌더를 유발하지 않는 점이 state와의 핵심 차이.
  15. #15
    Q.

    복잡한 상태 로직을 reducer 패턴으로 관리하는 훅

    A.

    useReducer

    action 기반. 여러 값을 함께 업데이트하거나 로직을 컴포넌트 밖으로 분리할 때 유리.
  16. #16
    Q.

    로딩 중 fallback UI를 보여주는 컴포넌트

    A.

    Suspense

    React.lazy로 코드 분할을 할 때, 또는 서버 컴포넌트/데이터 로딩에서 스트리밍 UI를 구성할 때 사용.
  17. #17
    Q.

    페이지 단위 코드를 런타임에 나눠 불러오는 기법

    A.

    코드 스플리팅 (Code Splitting)

    React.lazy + Suspense 조합, 또는 번들러 레벨에서 동적 import로 구현.
  18. #18
    Q.

    사용자 입력에 state를 직접 연결해 단일 진실 소스로 만드는 폼 패턴

    A.

    제어 컴포넌트 (Controlled Component)

    value와 onChange를 항상 같이 묶는다. 비제어 컴포넌트는 ref로 DOM을 직접 읽는 방식.

이 학습지를 효과적으로 활용하는 방법

  • ① 처음에는 전체 문항을 한 번씩 훑어보며 익숙한 항목과 낯선 항목을 분류하세요.
  • ② 학습 세션에서 "안 외운 문항만" 옵션으로 아직 숙달하지 못한 카드에 집중합니다.
  • ③ 랜덤 순서 학습을 활용해 카드 순서에 의존한 암기를 방지하세요.
  • ④ 키보드 단축키(1·2·A·D·Space)를 쓰면 한 손으로도 빠르게 복습할 수 있습니다.
  • ⑤ 복사(Fork)한 학습지에는 자유롭게 나만의 해설이나 예문을 덧붙여 내 스타일로 다듬어 보세요.

카데미에 로그인하면 이 학습지를
내 학습지로 복사하여 바로 학습할 수 있습니다.

바로 시작하기 로그인