React 7

React다시 공부하기

Reconciliation

랜더 전후의 일치 여부를 판단하는 규칙이다.
1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

엘리먼트의 타입이 다른경우

두 개의 트리를 비교할때, 루트엘리먼트부터 비교를해서 루트 엘리먼트의 타입이 다르면, 이전트리를 버리고 새로운 트리를 구축한다.

return(
	<div>
		<Counter />
	<div/>
);

return(
	<span>
		<Counter />
	<span/>
);

같은 <Counter/>컴포넌트이지만 루트엘리먼트가 div와 span으로 다르기때문에, Counter는 사라졌다 새로 다시 마운트가 된다.

엘리먼트의 타입이 같은경우

<div className="before" title="stuff" />

<div className="after" title="stuff" />
// className만 수정된다.

같은 타입의 두 엘리먼트를 비교할경우, 속성을 확인해 동일한 속성은 유지하고 변경된 속성들만 갱신한다.

같은 타입의 컴포넌트

return(
  <Counter number = "0"/>
);
    
return(
  <Counter number = "10"/>
);

컴포넌트가 마운트/언마운트되어서 랜더되지 않고, 업데이트를통해 갱신된다.

DOM노드의 자식(재귀적 처리)

return(
  <ul>
    <li>first</li>
  	<li>second</li>
  </ul>
);

return(
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
 );

마지막 엘리먼트만 마운트/언마운트 된다.

return(
  <ul>
    <li>second</li>
  	<li>third</li>
  </ul>
);

return(
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
 );

모든 자식 엘리먼트가 변경된다 ➡ 비효율적, Keys를 사용해 해결한다.

return(
  <ul>
    <li key="2">second</li>
  	<li key="3">third</li>
  </ul>
);

return(
  <ul>
    <li key="1">first</li>
    <li key="2">second</li>
    <li key="3">third</li>
  </ul>
 );

Portals

DOM컴포넌트 구조의 외부에 존재하는 DOM노드에 자식을 랜더링한다.
시각적으로 자식을 튀어나오도록 보여야하는 경우에 사용된다. (다이얼로그, 툴팁)

import { createPortal } from "react-dom";

const Portal = ({ children }) => {

  return
    createPortal(children, document.querySelector("#portal"))
};

export default Portal;

React.forwardRef

컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법이다.

export default React.forwardRef(function MyInput(props, ref) {
  return (
    <div>
      <p>My Input</p>
      <input type="text" ref={ref} />
    </div>
  );
});

function App() {
  const InputRef = useRef();

  const click = () => {
    console.log(InputRef.current.value);
  };

  return (
    <div>
      <MyInput ref={InputRef} />
      <button onClick={click}>Click</button>
    </div>
  );
}

1. React ref를 생성하고, InputRef변수에 할당한다.
2. <MyInput/>컴포넌트에 ref로 전달한다.
3. forwardRef를 통해 두번째 인자로 전달한다.
4. <input/>태그에 전달한다.
5. ref.current는 <input/>태그를 가리키게 된다.

Error Boundary

하위 컴포넌트 트리의 에러를 기록하면서 에러가 발생한 컴포넌트트리 대신, 폴백 UI를 보여주는 컴포넌트이다.
static getDerivedStateFromError() : 폴백 UI를 렌더링한다.
componentDidCatch() : 에러 정보를 기록한다.

포착불가능한 에러

• 이벤트 핸들러 ➡ try/catch문을 사용한다.
• 비동기 코드 setTimeout
• 서버 사이드 렌더링
• 에러 경계 자체에서 발생하는 에러