ref와 DOM 직접 접근 (useRef)
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. useRef()가 반환하는 객체의 구조로 올바른 것은?
💡 useRef()는 { current: 초기값 } 형태의 객체를 반환합니다. .current 속성을 통해 값에 접근하고 수정합니다.
Q2. useRef와 useState의 가장 중요한 차이점은?
💡 useRef의 핵심 특징은 .current 값이 변경되어도 리렌더링을 유발하지 않는다는 것입니다. 반면 useState는 값 변경 시 리렌더링을 유발합니다.
Q3. 커스텀 컴포넌트에 ref를 전달하기 위해 필요한 React API는?
💡 forwardRef를 사용하면 부모 컴포넌트가 자식 커스텀 컴포넌트 내부의 DOM 요소에 ref를 통해 접근할 수 있습니다.
Q4. useRef를 사용하기에 가장 적합한 상황은?
💡 setInterval ID처럼 리렌더링 없이 유지해야 하는 값은 useRef에 저장합니다. 화면에 표시되는 상태(A, B, D)는 useState를 사용해야 합니다.
Q5. useImperativeHandle 훅의 주요 목적은?
💡 useImperativeHandle은 forwardRef와 함께 사용하여, 부모에게 노출할 메서드를 선택적으로 정의합니다. 내부 DOM 전체를 노출하지 않고 필요한 API만 제공할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.