Fragment, Portal, useRef

  1. Fragment
       - 무의미한 div를 방지(렌더링 속도 증가 및 보다 semantic하게 작성)
           - <>...</> 이나, <React.Fragment>...</React.Fragment>,
              또는 import {Fragment} from 'react' 
                     <Fragment>...</Fragment>로 대체 가능

           - ex)

                const Modal = () =>{
                   ...

                   return (

                       <>

                          <Card>

                              ... // 컴포넌트 내부 내용 작성

                          </Card>

                       </>

                  )


   2. Portal
      - react 내부 jsx 코드가 html 렌더링될 때, react 위치와 다른 곳에 렌더링되게 함 -> 보다 semantic하게 작성 가능!
      - ex)
           <>
              <Modal />              ->        <div> // modal
              <UserForm />                         <h1> modal!            
            </>                                      </div> 

                                                        <div> // 주 내용
                                                            <h2> ...
                                                            <form>
                                                               ...

      - 사용법
          - A. import ReactDom from "react-dom" 입력 (portal 관련 메소드가 react-dom 에 존재)
          - B. public -> index.html에 랜더링시킬 위치에 코드 작성
                  ex) <div id="modal-backdrop"></div> // 위 위치에 뒷배경 위치
                       <div id="modal"></div> // 위 위치에 modal 창 위치
                       <div id="root"></div>

          - C. 컴포넌트의 return 내부에 ReactDom.createPortal(JSX 코드, 포인터) 작성
                  - JSX 코드 : 이동시킬 요소의 JSX 코드
                  - 포인터 : HTML 문서 중 어느 곳으로 이동시킬 것인지
                         - WEB API로 작성(ex) document.getElementById("modal"))

                  - ex) <>
                            {ReactDom.createPortal(<BackDrop />, document.getElementById("modal-backdrop"))}
                            {ReactDom.createPortal(<Modal />, document.getElementById("modal"))}
                          </>         
         
          
   3. useRef
       - useRef()는 current 속성을 가진 객체 반환
       - current 속성의 값을 변경해도, state 처럼 값이 바뀐다고 다시 렌더링 X
           - 즉, 불필요한 렌더링 및 값 초기화 방지
       - current 속성은 인자의 값으로 초기화됨

       - 사용법 
           1. import {useRef} from 'react';
           2. 컴포넌트 내부에서 useRef() 호출
                - const userAge = useRef(); // current 속성 가진 객체 반환

           3. JSX 코드 내부에 ref={userAge} 입력
                - ref는 특수한 props로 취급, html 태그와 ref 연결해주는 역할

           4. userAge.current.value 통해 input 값 참조 가능
                - handler 내부에 console.log(userAge); 를 실행시키면
              current 가진 객체 출력, userAge.current.value를 통해 input 값 참조 가능