React18 디자인 패턴과 베스트 프랙티스

React18에서는 배치 최적화가 일어난다 이게 어떤 얘기나면 

아래 코드가 이전에는 3번 렌더링이 일어났다면 

react18에서는 한번 렌더링 이후 처리한다. => 불필요한 렌더링을 줄여준다

useEffect(() => {
  setCount(count + 1)
  setCount(count + 1)
  setCount(count + 1)  
}, [])

---

트랜지션

react-transition-group이 등장했었고 

이유는 css애니메이션만 사용하면 컴포넌트의 마운트 시점을 제어하기가 애매해지기 때문이었다

css애니메이션으로 제어하려면 class네임이나 id등 props로 제어해야 하기 때문에 컴포넌트의 생명주기랑 맞추는게 애매해짐

but

react19에서는 사용이 불가능하다 

런타임에서 TypeError가 발생하고 react-dom의 findDomNode가 react19에서 아예 사라져 버렸기 때문에 못쓴다

_proto.performExit = function performExit() {

var _this3 = this;

var exit = this.props.exit;

var timeouts = this.getTimeouts();

var maybeNode = this.props.nodeRef ? undefined : _reactDom.default.findDOMNode(this); // no exit animation skip right to EXITED

if (!exit || _config.default.disabled) {

this.safeSetState({

status: EXITED

}, function () {

_this3.props.onExited(maybeNode);

});

return;

}

 

그럼 애니메이션을 효율적으로 다루고 싶은데 css애니메이션만 써야하는거냐? -> nope

framerMotion으로 추천함

 

---

hydrateRoot

 

as-is react17

1. 모든 렌더링이 동기적 / 거대 컴포넌트 렌더링 시 메인 스레드 오래 점유 / js는 단일 스레드

2. hydrate는 있었음 ReactDom.render / ReactDom.hydrate

 

to-be react18

1. ReactDom.render -> createRoot + .render

2. ReactDom.hydrate -> hydrateRoot
3. 여러개의 root를 가질 수 있게 됨 / root마다 root객체

4. root별로 unmount/render가 가능해짐

5. concurrent rendering으로 렌더 작업을 쪼개서 사용이 가능해짐

6. renderToPipeableStream api 등장

 

React 0.12 부터 renderToString이 등장햇는데 이건 나중에 따로

 

---

기본적인 ssr예제 

---