Study

만약 renderToPipeableStream를 사용하지만 Suspense는 사용하지 않았을 경우 전체 로딩후 한번에 표시된다. 따라서 스트리밍 SSR을 제대로 활용하기 위해서는 Suspense를 적극적으로 사용해야한다.

동일한 루트에서 render를 두 번 이상 호출하면, React는 이전에 렌더링 된 트리와 비교해서 재사용할 수 있는 부분과 다시 만들어야 하는 부분을 결정한다.

Portal은 DOM 노드의 물리적 배치만 변경한다. 따라서 부모트리가 제공하는 Context에는 접근할 수 있고 스타일은 부모 컴포넌트의 영향을 받지 않는다.

점진적 향상을 통해 자바스크립트가 활성화 되기전에 제출할 수 있게 해줄 수 있다. 이는 네트워크 속도가 느린 환경에서 좋은 선택지가 될 수 있다.

children과 dangerouslySetInnerHTML는 모두 내부 콘텐츠를 지정하는 속성이며 따라서 동시에 전달할 수 없다.

useFormStatus는 폼 제출중인지를 감지해서 버튼을 비활성화하거나 로딩 ui를 보여주고자할때 사용한다.

cache는 서버컴포넌트에서 사용되며 함수를 감싸서 가져온 데이터나 연산을 캐싱한다. 이 캐시는 서버캐시이며 React는 서버요청마다 캐시를 무효화한다.

가상 DOM을 비교할때 Fragment나 배열로 감싸더라도 한 단계 깊이까지는 동일하다고 판단한다. 하지만 두단계 깊이 차이는 state를 초기화 시킨다.

모든 훅의 인자는 렌더링마다 재평가된다. 그래서 인자로 함수의 실행을 넘기지 않고 함수와 인자를 별도로 넘기거나 익명함수로 감싸서 넘겨야한다.

useActionState를 이용하면 간단한 폼을 구현할때 로딩처리, state없이 폼데이터 접근등을 할 수 있다.

useEffect의 정리함수는 의존성 배열의 값이 변할때 실행되지만 ref의 정리함수는 컴포넌트가 DOM에서 제거될때 실행된다.

삼항연산자를 통해 컴포넌트를 렌더링할 경우 완전히 교체되는 것처럼 보이지만 결과적으로 JSX 마크업에서가 아닌 UI 트리에서의 위치는 변하지 않는다는 점에 주목해야한다.

버튼을 구현할때 div 대신 button을 사용해야한다. 이는 키보드 내비게이션과 같은 빌트인 브라우저 동작을 활성화해준다.

재방문율이 높고 SEO가 중요하지 않은 어드민 페이지 같은 경우는 SSR보다 CSR이 좋은 선택일 수 있다.