React에서요소선택
-> React 컴포넌트가아닌HTML Element에 직접 접근해야한다면..?
1) id 지정
- 같은컴포넌트를 반복해서 사용하면 id가 중복되는 문제
=> 고유한 id가 되지않음.
반면에 ref는 컴포넌트 내부에서만 작동
ref 란?
- 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용
- 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작
-> 따라서중복되지않음! - DOM을 직접적으로 건드려야 할 때 사용
- 특정 input에 focus 주기, 스크롤박스조작, 비디오 플레이어의 재생/정지 기능 등
주의! Class 형 컴포넌트에서만 기본 기능으로제공함.
이번 챕터까지 클래스형 컴포넌트 사용. 이후는 함수형 컴포넌트만 사용.
ref 사용하기
함수형 컴포넌트
- 함수형 컴포넌트에서 ref를사용 하기 쉽게 만들어주는 Hook
- useRef()는 인자로 받은 값으로 초기화된 변경 가능한ref 객체를반환
한다. - ref.current로 현재 가리키는 객체에 접근할 수 있다.
참고
[코딩온] 웹개발자 풀스택 과정 13주차 ppt
