Fix/#375-K: 회의록 블럭 memo 조건 추가 (#376)

* fix: Block memo 조건 추가

Co-authored-by: hodun <[email protected]>

* fix: index props 변경되면 data-index 교체

* fix: TextBlock 컴포넌트에서 불필요한 blockRef.current 가드 제거

Co-authored-by: hodun <[email protected]>

Author: se030

client/src/components/Block/TextBlock.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* TextBlock 마운트 이후 항상 존재하는 blockRef.current 존재 여부 확인하는 불필요한 가드를 제거하기 위함 */
+
 import { BlockType } from '@wabinar/constants/block';
 import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
 import {
@@ -12,7 +15,7 @@ import { useOffset } from 'src/hooks/useOffset';
 
 import ee from '../Mom/EventEmitter';
 
-interface BlockProps {
+interface TextBlockProps {
   id: string;
   index: number;
   onHandleBlocks: React.KeyboardEventHandler;
@@ -30,7 +33,7 @@ function TextBlock({
   setType,
   isLocalTypeUpdate,
   registerRef,
-}: BlockProps) {
+}: TextBlockProps) {
   const { momSocket: socket } = useSocketContext();
 
   const initBlock = () => {
@@ -56,7 +59,7 @@ function TextBlock({
 
   // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
   const updateCaretPosition = (updateOffset = 0) => {
-    if (!blockRef.current || offsetRef.current === null) return;
+    if (offsetRef.current === null) return;
 
     const selection = window.getSelection();
 
@@ -67,14 +70,14 @@ function TextBlock({
     const range = new Range();
 
     // 우선 블럭의 첫번째 text node로 고정, text node가 없는 경우 clearOffset()
-    if (!blockRef.current.firstChild) {
+    if (!blockRef.current!.firstChild) {
       clearOffset();
       return;
     }
 
     // range start와 range end가 같은 경우만 가정
     range.setStart(
-      blockRef.current.firstChild,
+      blockRef.current!.firstChild,
       offsetRef.current + updateOffset,
     );
     range.collapse();
@@ -87,9 +90,7 @@ function TextBlock({
   const onInitialize = (crdt: unknown) => {
     syncCRDT(crdt);
 
-    if (!blockRef.current) return;
-
-    blockRef.current.innerText = readCRDT();
+    blockRef.current!.innerText = readCRDT();
 
     updateCaretPosition();
   };
@@ -104,9 +105,7 @@ function TextBlock({
       return;
     }
 
-    if (!blockRef.current) return;
-
-    blockRef.current.innerText = readCRDT();
+    blockRef.current!.innerText = readCRDT();
 
     if (prevIndex === null || offsetRef.current === null) return;
 
@@ -123,9 +122,7 @@ function TextBlock({
       return;
     }
 
-    if (!blockRef.current) return;
-
-    blockRef.current.innerText = readCRDT();
+    blockRef.current!.innerText = readCRDT();
 
     if (targetIndex === null || offsetRef.current === null) return;
 
@@ -151,6 +148,7 @@ function TextBlock({
 
   useEffect(() => {
     registerRef(blockRef);
+    blockRef.current!.setAttribute('data-index', index.toString());
   }, [index]);
 
   useEffect(() => {
@@ -162,20 +160,16 @@ function TextBlock({
       const remoteDeletion = localDeleteCRDT(0);
       socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
 
-      if (!blockRef.current) return;
-
-      blockRef.current.innerText = readCRDT();
-      blockRef.current.focus();
+      blockRef.current!.innerText = readCRDT();
+      blockRef.current!.focus();
     }
   }, [type]);
 
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();
 
-    if (!blockRef.current) return;
-
-    if (blockRef.current.innerText === '/') {
+    if (blockRef.current!.innerText === '/') {
       setIsOpen(true);
     } else if (isOpen) {
       setIsOpen(false);
@@ -238,14 +232,14 @@ function TextBlock({
     e.preventDefault();
 
     setOffset();
-    if (offsetRef.current === null || !blockRef.current) return;
+    if (offsetRef.current === null) return;
 
     let previousLetterIndex = offsetRef.current - 1;
-    const previousText = blockRef.current.innerText.slice(
+    const previousText = blockRef.current!.innerText.slice(
       0,
       previousLetterIndex + 1,
     );
-    const nextText = blockRef.current.innerText.slice(previousLetterIndex + 1);
+    const nextText = blockRef.current!.innerText.slice(previousLetterIndex + 1);
 
     const pastedText = e.clipboardData.getData('text/plain').replace('\n', '');
     const remoteInsertions = pastedText
@@ -254,7 +248,7 @@ function TextBlock({
 
     socket.emit(BLOCK_EVENT.UPDATE_TEXT, id, remoteInsertions);
 
-    blockRef.current.innerText = previousText + pastedText + nextText;
+    blockRef.current!.innerText = previousText + pastedText + nextText;
     updateCaretPosition(pastedText.length);
   };
 

client/src/components/Block/index.tsx

@@ -98,4 +98,8 @@ function Block({
   );
 }
 
-export default memo(Block);
+function isMemoized(prev: BlockProps, next: BlockProps) {
+  return prev.id === next.id;
+}
+
+export default memo(Block, isMemoized);