반응형

※ 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>
     - 객체에서만 사용 할 수 있다.

+ Recent posts