React의 컴포넌트·Hook·상태 관리 핵심 개념 10문항
10문항 · 4지선다 · 해설 포함
전체 10문항의 정답과 해설입니다. 아직 풀지 않았다면 위에서 먼저 풀어보세요.
React 컴포넌트는 state나 props가 변경될 때 리렌더링됩니다. 불필요한 리렌더링을 막기 위해 React.memo, useMemo, useCallback을 활용합니다.
const [state, setState] = useState(초기값)으로 사용합니다. 첫 번째는 현재 상태값, 두 번째는 상태를 업데이트하는 함수입니다.
useEffect는 렌더링 이후 API 호출, 이벤트 리스너 등록, 타이머 설정 등 부수 효과를 처리합니다. 의존성 배열로 실행 조건을 제어합니다.
key는 리스트 항목의 고유 식별자로 React의 재조정(Reconciliation) 알고리즘이 어떤 항목이 추가·변경·삭제됐는지 효율적으로 판단하는 데 사용됩니다.
Context API는 props를 여러 단계에 걸쳐 전달(prop drilling)하지 않고 컴포넌트 트리 어디에서나 데이터를 소비할 수 있게 합니다. 테마, 언어 설정, 인증 상태 관리에 적합합니다.
useMemo는 의존성이 변경될 때만 값을 재계산합니다. 복잡한 계산, 대용량 배열 필터링 등에서 성능 최적화에 사용합니다. 남용 시 오히려 성능이 떨어질 수 있습니다.
Virtual DOM은 메모리 내 가상 표현이며, 이전과 새 Virtual DOM을 비교(diffing)해 실제로 변경된 부분만 실제 DOM에 적용합니다. 불필요한 DOM 조작을 줄입니다.
useRef는 DOM 참조, 렌더링 없는 값 저장, 이전 값 보관 등에 사용합니다. 전역 상태 관리는 useContext, Redux, Zustand 등이 담당합니다.
React.lazy(() => import('./Component'))와 <Suspense fallback={...}>을 사용하면 필요한 시점에 컴포넌트를 동적으로 로드해 초기 번들 크기를 줄입니다.
React 18은 Concurrent Mode를 정식 지원해 렌더링을 중단·재개·우선순위 조정할 수 있게 됩니다. useTransition, useDeferredValue 등의 훅이 추가되었습니다.
10문제이며 문제마다 보기 4개 중 하나를 고릅니다. 전체 1분 정도 걸립니다.
맞힌 개수를 10문제 기준으로 환산해 점수와 정답률을 함께 보여줍니다. 문제를 풀 때마다 정답 여부가 바로 표시됩니다.
기술·IT 분야의 상식 문제로 구성했습니다 — React의 컴포넌트·Hook·상태 관리 핵심 개념 10문항.
네, 10문제 모두 해설이 붙어 있습니다. 보기를 고르면 정답과 함께 왜 그런지 바로 확인할 수 있습니다.