반응형
※ forwardRef
- 자식 컴포넌트 요소를 호출하는 부모 컴포넌트에 역으로 참조해서 전달
사용법)
const Modal = forwradRef((props, ref) => {
return (
<aside className='modal' ref={ref}>
<div className='con'></div>
<span className='close'>close</span>
</aside>
);
});
※ useImperativeHandle
- 자식 컴포넌트가 아닌 특정 커스텀 객체를 부모로 전달
- forwardRef 안쪽에서만 활용 가능
사용법) ref는 부모쪽에 보내는 것
useImperativeHandle(ref, () => {
return { Open: () => setOpen(true) };
});
※ optional chaining - 옵셔널체이닝 (객체에서만 사용 가능)
- 첫 렌더링 싸이클에서는 Vids[0]의 객체 값 자체가 없음으로 없는 요소의 id값 호출 시 오류가 되니 객체 값 자체가 없으면 skip 되게 함
사용법) '?'를 쓰면 됨
<iframe title={Vids[0]?.id} src={` https://www.youtube.com/embed/$ {Vids[0]?.snippet.resourceId.videoId}`}></iframe>
- 객체에서만 사용 할 수 있다.
'IT > React' 카테고리의 다른 글
[React] window 객체에 이벤트를 연결 할 때 주의점 (0) | 2023.07.04 |
---|---|
[React] || ??를 사용법 (0) | 2023.06.30 |
[React] Component children 정리 (0) | 2023.06.29 |
[React] react-router-dom (Link , NavLink, Switch) (0) | 2023.06.29 |
[React] useRef 정리 (0) | 2023.06.29 |