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

React 핵심 개념 정리

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

18 문항 1 복사 데모 2026.04.20

무료 체험 퀴즈

먼저 5문항만 풀어보세요

1 / 5

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

컴포넌트 (Component)

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

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

JSX

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

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

Props

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

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

State

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

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

Hook

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

수록 문항

총 18개

아래 문항들은 이 학습지에 수록된 카드입니다. 로그인하면 이 학습지를 내 계정으로 복사해 카드를 한 장씩 넘기며 반복 학습할 수 있고, 숙달한 카드는 완료 표시하여 다음 세션에서 제외할 수 있습니다.

  1. #1
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  2. #2
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  3. #3
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  4. #4
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  5. #5
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  6. #6
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  7. #7
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  8. #8
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  9. #9
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  10. #10
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  11. #11
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  12. #12
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  13. #13
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  14. #14
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  15. #15
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  16. #16
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  17. #17
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.
  18. #18
    Q.

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

    답은 위 체험 퀴즈 또는 로그인 후 학습 화면에서 확인할 수 있습니다.

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

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

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

바로 시작하기 로그인