[React] Portals, ref

Portals

자식 컴포넌트를 다른 부분으로 렌더링 할 수 있다.

import { createPortal } from "react-dom";

// ...

<div>
  <p>This child is placed in the parent div.</p>
  {createPortal(
    <p>This child is placed in the document body.</p>,
    document.body
  )}
</div>;

Portals은 DOM 노드의 물리적 배치만 변경한다.

createPortal(children, domNode, key?)

• children : JSX, Fragment, 문자열, 숫자 등 React로 렌더링할 수 있는 모든 것.
• domnode : document.getElementById() 가 있어야 한다.
• key : 포털의 유니크키

JSX에 포함될 수 있는 React노드를 반환한다. React가 렌더링을 하다가 이를 발견하면 제공된 children을 렌더링한다.

포털의 이벤트는 DOM트리가 아닌 React 트리에 따라 전파된다.

포털은 DOM노드 안에서 물리적 위치만 변환한다. 렌더링된 JSX는 ReactComponent에서 자식노드로 동작한다. 자식노드는 여전히 부모노드에서 제공하는 컨텍스트에 접근할 수 있고 자식에서 부모로 버블링된다.

ref

렌더링이 필요하지 않은 값을 참조할 수 있는 hook

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

ref.current. 는 리렌더링하지 않는다. ref는 일반 JavaScript 객체이기 때문에 React는 변경시점을 인식하지 못한다.

Strict 모드를 사용하는 경우 각 ref 개체는 두 번 생성되지만 하나는 삭제된다. PureComponent일 경우 동작에 영향을 주지 않는다.

useRef 는 초기 값으로 설정된 단일 속성이 있는 ref object(객체)를 반환한다.